1、v-on:click 单击事件
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src = "vue.js"/> <script> var c = new Vue({ el:'#box', data:{ arr:['a','b','c','d'] }, methods:{ show:function(){ alert(1); }, add:function(){ this.arr.push('e') } } }); </script> </head> <body> <div id = "box"> <input type = "button" value = "button" v-on:click="show()"> <input type = "button" value = "button" v-on:click="add()">
<br>
<ul><li v-for = "value in arr">{{value}}</li></ul>
</div> </body> </html>
v-on:mouseover、mouseout、mousedown、mouseup、dblclick....
2、v-show = "true/false" 显示、隐藏
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src = "vue.js"/> <script> var c = new Vue({ el:'#box', data:{ arr:['a','b','c','d'], a:true }, methods:{ show:function(){ alert(1); }, add:function(){ this.arr.push('e') } } }); </script> </head> <body> <div id = "box"> <input type = "button" value = "button" v-on:click="a=false"> <input type = "button" value = "button" v-on:click="add()" v-show="a"> </div> </body> </html>
补充：
v-on:click 简写： @click
事件对象：
@click = "show($event)"
事件冒泡：子事件结束后父事件相继冒泡执行
阻止事件冒泡：
1、event.cancelBubble = true;
2、@click.stop = "show()" //推荐
默认事件
@contextmenu = "show($event)" //右击事件，右击浏览器会默认弹出菜单
阻止默认事件：
1、event.preventDefault();
2、@contextmenu.prevent = "show()"
键盘事件
@keydown = "show($event)" @keyup
show:function(ev){
alert(ev.keyCode);
}
常用键：
回车 @keyup.13 @keyup.enter
上，下，左，右 up,down,left,right