jsp页面中使用vue iview能现代技术

jsp页面中使用vue iview

资源引入

<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>

功能测试

注意将原来的大写字母改为i-，如Col改为i-col，row改为i-row，Button改为i-button

<div id="app">
		<div>
			<div>
				{{num}}
			</div>
			<i-row>
				<i-col span='2'>
					<i-button @click="add" type="primary">加 +1</i-button>	
				</i-col>
				<i-col span='2'>
					<i-button @click="sub" type="success">减 -1</i-button>
				</i-col>
			</i-row>
		</div>
		<script>
			new Vue({
				el:'#app',
				data(){
					return{
						list:[],
						num:3
					}
				},
				methods: {
					add(){
						this.num++
					},
					sub(){
						this.num--
					}
				},
			})
		</script>
	</div>