简介
vue事件监听通过v-on指令配置在HTML中，相当于原生的addEventListener。所有的vue事件处理方法和表达式都严格绑定在当前视图的ViewModel上，采v-on指令有如下好处：
1）通过查看HTML模板便能轻松定位对应的方法
2）ViewModell和DOM完全解耦，易于测试
3）当一个ViewModel被销毁，所有的事件处理器都会自动删除
如何绑定
内联方式：
//绑定单击事件处理器click
<div v-on:click="greet">点击问候</div>
//简写
<div @click="greet">点击问候</div>
内联方式下一个事件处理器只能绑定一个方法，若需要绑定多个方法，只能通过原生addEventListener方法来绑定。
methods配置
用户绑定的事件需要在vue实例中进行定义，所有定义的方法都放在methods属性下
var vm = new Vue({el: '#app',methods: {greet() {console.log(’hello‘)；}}
})
// 也可以在javascript中调用
vm.greet();
需要注意的地方：
1）methods中定义的方法内的this始终指向创建的vue实例
2）与事件绑定的方法支持参数event即原生DOM事件的传入
3）方法用在普通元素上时，只能监听原生DOM事件；用在自定义元素组件上时，也可以监听子组件触发的自定义事件
$events
vue中创建的方法需要访问原生DOM事件时可以直接传入event来获取。在内联语句处理器中需要访问原生DOM事件时，可以用一个特殊变量$event将其传入方法中。
<div @click="greet('hello', $event)"></div>methods: {greet(msg, event) {event.preventDefault(); // 我们可以通过event访问原生事件对象}
}
事件修饰符
vue事件修饰符是以半角句号（.）开始的特俗后缀。
vue为v-on提供了四个修饰符（.prevent\ .stop \ .capture\ .self）+按键修饰符
- prevent：用于阻止事件的默认行为，使之在HTML中便能完成操作
//使提交事件不再重载页面
<form @submit:prevent="onSubmit"></form>
- stop ：用于阻止事件冒泡
//阻止单击事件冒泡
<div @click.stop="deThis"></div>
- capture：表示添加事件侦听器时采用捕获模式
<div @click.capture="doThis"></div>
- self：当事件在该元素本身而非子元素触发时 触发回调
<div @click.self="doThis"></div>
- 按键：监听键盘事件
<input @keyup.13="submit"></div>
//同上
<input @keyup.enter="submit"></div>
完整的按键别名如下：
.enter(13)
.tab(9)
.delete(46)
.esc(27)
.space(32)
.up(38)
.down(40)
.left(37)
.right(39)
多重指令写法
//1.0
<div @click="handleClick" @keyup="handleKeyUp" @keydown="handleKeyDown"></div>
)
