[ Vue js + JSP ] EL κ°μ λ°μΈλ© νλ©΄, μ΄λ²€νΈ μ λ¬μ΄ μλλ νμ
JSP νμ΄μ§ λ΄μμ Vue.js μ»΄ν¬λνΈλ₯Ό μ¬μ©νλ μ€, μ΄λ²€νΈ μ λ¬μ΄ μλλ νμμ΄ λ°μνλ€.
jsp νμ΄μ§ λ΄ vue.js μ μΈ λΆλΆ
var vm = new Vue({
el: '#content',
components: {},
data: function () {
return {
list: [],
pageInfo: {
pageNo: 1,
pageSize: 10,
totalCount: 0,
}
}
},
created: function () {
let vm = this;
vm.list = JSON.parse('${result.list}');
vm.totalCount = ${result.totalCount};
},
mounted: function () {
console.log('mounted p');
},
updated: function () {
console.log('updated p');
},
distroyed: function () {
console.log('distroyed p');
},
methods: {
goPage: function (pageNo) {
location.href="./index.do?pageNo=" + pageNo;
},
}
});
μ»΄ν¬λνΈ λΆλΆ
<paging v-bind:total-count="pageInfo.totalCount" v-bind:page-no="pageInfo.pageNo" v-bind:opts="pageInfo" @update:page="goPage"></paging>
pageInfo κ°μ κ°μ Έμμ νμ΄μ§μ 그리λ μ»΄ν¬λνΈμ΄λ€.
μ΄ μν©μμ μ무리 pageInfo μ totalCount λ₯Ό μ λ°μ΄νΈ ν΄λ νμ΄μ§κ° μ μμ μΌλ‘ λμνμ§ μμλ€.
1. μ»΄ν¬λνΈ μ μΈ λΆμ, μ½μ λ‘κ·Έλ₯Ό μ°κ³ νμΈν΄λ³΄μλ€.
>> λ‘κ·Έκ° μ°νμ§ μμλ€.
2. Create μμ μμ totalCount λ₯Ό μμμ κ°μΌλ‘ λ³κ²½νλ€.
>> ν΄λΉ κ°μΌλ‘ νμ΄μ§μ΄ μ μλμ νμλ€.
μ μν©μ ν΅ν΄ κ²°κ΅μ μ΄λ²€νΈ μ νμ λ¬Έμ κ° μλ€κ³ μκ°νκ³
무μμ΄ λ¬Έμ μΈμ§ μ°Ύμλ³Έ κ²°κ³Ό 곡μ λ¬Έμμμ μλμ λ΄μ©μ μ°Ύμλ€.
μ¦, Create μμ μμλ $el μ μ¬μ©ν μ μλ€λ μκΈ°μ΄λ€. μ무리 create μμ μμ λ³μμ el κ°μ λ°μΈλ© ν΄λ΄€μ Vue μμ ν΄λΉ κ°μ΄ λ³κ²½λ¨μ κ°μ§νμ§ λͺ»νλ κ²μ΄λ€.
λ°λΌμ μλμ κ°μ΄ mount λΆλΆμμ μμ μ ν΄μ€μΌλ‘μ¨ λ¬Έμ λ₯Ό ν΄κ²°νλ€.
mounted: function () {
console.log('mounted p');
let vm = this;
vm.pageInfo.totalCount = ${result.totalCount};
vm.pageInfo.pageNo = ${result.paramMap.pageNo};
},
JSP νμ΄μ§μμ Vue.js λ₯Ό μ¬μ©νλ€λ©΄ κΌ λͺ μ¬ν΄μΌν μ¬νμΌλ‘ 보μΈλ€.