1.v-on : 用于绑定事件
<div class="app"> <button v-on:click="myclick">click me</button> </div>注意:click为点击事件,myclick是一个方法,可以写成myclick(),如没有参数也可以写成myclick,该方法定义在vue实例的methods里;
var app = new Vue({ el:'.app', data:{ }, methods:{ myclick:function(){ console.log(111111); } } });2.v-on:click还可以简写成@click 例如:
<button v-on:click="myclick">click me</button>与
<button @click="myclick">click me</button>效果相同;
3.可以绑定多个事件
<button v-on="{mouseenter:onEnter,mouseout:onOut}" @click="onClick">点击</button>当绑定多个事件时,需要传入一个对象,对象的键名就是事件名,对象的键值就是对应事件要执行的方法。
4.事件绑定类型
鼠标事件:
click 单击 dblclick 双击 mousedown 鼠标按下 mouseup 鼠标抬起 mouseover 鼠标移入 mouseout 鼠标移出 mousemove 鼠标移动 不停的触发(只要相对移动了) mouseenter 鼠标移入 mouseleave 鼠标移出键盘事件:
keydown 键盘按下(如果按住不放,不停的重复触发) keyup 键盘抬起 keypress 键盘按下(只支持字符键)