vue.js를 기존의 레거시 코드 (jsp) 그리고 jquery와 같이 사용해야 할 때,
vue.js는 컴포넌트를 .js파일로 분리하여 import 하는 방식으로 사용할 수 있다.
물론 vue 공식페이지에서는 학습용이나 프로토타입을 만들때 사용하는 것을 권하고 있으나,
현실적으로 legacy에서 이행하는 과정에서 사용할 수 있는 방법이라고 생각한다.
대신, SFC(single file component)를 사용할 수 없고, npm (node) 방식으로 실행하여 개발할 수 없다는 점
(-> 대신 tomcat으로 구동가능하다)
아래의 소스는 Highchart를 사용하여, Random하게 날아오는 숫자데이터를 그리는 프로그램으로
Jquery의 ajax통신 + vue 컴포넌트를 결합한 것이다.
상위 컴포넌트 (chart.jsp)에서 하위 컴포넌트(chart.js)로
props를 활용하여 데이터를 송신하고 하위컴포넌트에서 수신받은 뒤 차트를 리로딩한다.
chart.js
(function(){
var template = ''
+ '<div id="container" style="width:100%; height:400px;"></div>';
var options = {
chart : {
type : 'bar'
},
title : {
text: 'Fruit Consumption'
},
xAxis : {
categories : ['Apple', 'Orange', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series : {}
}
comp = Vue.component('chart',{
template : template,
props: ['chartData'],
data : () => ({
options : options
}),
method:{
setValue(e){
console.log("setValue(2.0) :"+ e)
},
},
watch: {
chartData() {
options.series = this.chartData
Highcharts.chart('container', options)
}
},
mounted() {
options.series = this.chartData
Highcharts.chart('container', options)
},
});
}());chart.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!--jquery-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <!--vue.js : developing mode-->
<script src="https://code.highcharts.com/highcharts.js"></script> <!-- highchart -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<chart :chart-data="chartData"></chart>
<h1>chart data Change
</h1>
<button type="button" class="btn btn-primary" v-on:click="callAjax" style="background:#4040FF; border-radius:10px; color:white; width:70px; height:50px">Change</button>
</div>
<script src="./chart.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: () => ({
chartData : [{
name : 'Kate',
data : [1, 10, 4]
}]
}),
computed : {
},
beforeMount : function(){
},
methods : {
callAjax : function(){
console.log('call Ajax');
var tempData = {};
$.ajax({
url: 'https://www.random.org/integer-sets/?sets=1&num=3&min=1&max=50&seqnos=on&commas=on&sort=on&order=index&format=plain&rnd=new',
dataType: 'text',
data: {},
success: function( result ) {
result = result.slice(0, -1).substring(7);
var strList = result.split(",").map( Number );
console.log("return value:"+ strList);
tempData= {
name : 'NewOne',
data : strList
}
},
error: function(e) {
console.log(e);
}
}).done(data => {
console.log(this);
this.chartData = [];
this.chartData.push(tempData);
})
}
},
})
</script>
</body>
</html>출처 :
https://nm817.tistory.com/33?category=816335
http://tech.javacafe.io/2017/11/14/Vuejs-%EA%B2%BD%ED%97%98-%ED%9B%84%EA%B8%B0-%EA%B3%B5%EC%9C%A0/
Curious for Everything