[ 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 ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ผญ ๋ช…์‹ฌํ•ด์•ผํ•  ์‚ฌํ•ญ์œผ๋กœ ๋ณด์ธ๋‹ค.

     

     

     

     

    728x90
    ๋ฐ˜์‘ํ˜•

    '๐Ÿ“ฑVue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    [ VueJs Datepicker ] datepicker ์ด๋ฒคํŠธ ๊ด€๋ จ ๋ฌธ์ œ  (0) 2022.03.16

    ๋Œ“๊ธ€