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 ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ๊ผญ ๋ช ์ฌํด์ผํ ์ฌํญ์ผ๋ก ๋ณด์ธ๋ค.
'๐ฑVue.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ VueJs Datepicker ] datepicker ์ด๋ฒคํธ ๊ด๋ จ ๋ฌธ์ (0) | 2022.03.16 |
---|
๋๊ธ