Vue2学习笔记:v-on
Vue的事件：
v-on: click/mouseover/mouseover/mousedown/dbclick/...
下面是点击事件介绍：
1.点击事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(){
alert('这是点击事件！');
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
</body>
</html>
当点击按钮的时候，弹出alert!
2.向数组添加元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
arr:['1','2']
},
methods:{
add:function(){
var num = this.arr.length+1;
this.arr.push(num); //给数组累加1
//这里的this就是实例化后的对象vm
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()"> <br />
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
</body>
</html>
结果，按一次列表累加1
