1. 事件处理方法
使用v-on或者@。后面添加一个方法名或者Javascript语句或者方法的调用。
有时需要在内联语句处理器中访问原始的 DOM 事件，可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
2. 事件修饰符
//.stop
//阻止单击事件进行冒泡传播
<a v-on:click.stop="doThis"></a>
//.prevent
//阻止事件默认行为
<form v-on:submit.prevent="onSubmit"></form>
//.capture
//使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
//.self
//只有event.target是当前元素自身时才触发处理函数
//即事件不是由内部元素触发的
<div v-on:click.self="doThat">...</div>
//.once
//只会触发一次处理函数
<a v-on:click.once="doThis"></a>
//.passive
//事件的默认行为将会立即触发,不加的话是当处理函数执行完毕再触发默认行为
//.passive 不能和 .prevent 一起使用
<div v-on:scroll.passive="onScroll">...</div>
//修饰符可以叠加使用
<a v-on:click.stop.prevent="doThat"></a>
使用事件修饰符时，顺序很重要，不同的顺序代表不同的意思。
v-on:click.prevent.self会阻止所有的点击进行冒泡传播，而v-on:click.self.prevent只会阻止对自身元素的点击。
3. 按键修饰符
<!-- 只有在 `$event.key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!-- onPageDown处理函数只会在 `$event.key` 等于 `PageDown` 时被调用 -->
<input v-on:keyup.page-down="onPageDown">
常用按键码别名
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名
Vue.config.keyCodes.f1 = 112
// 定义完可以使用 `v-on:keyup.f1`
4.系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta（Windows系统键盘对应Win键）
<!-- Alt + C 按住Alt的情况下按住C并松开C才触发 -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click 按住ctrl的情况下点击该div触发处理函数-->
<div v-on:click.ctrl="doSomething">Do something</div>
//如果想要按下ctrl然后松开就触发处理事件的话
//可以使用`keyCode`：`keyup.17`
5. .exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。有多余的系统修饰符则不触发。
<!-- 即使 Ctrl 与 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
6. 鼠标按钮修饰符
.left鼠标左键按下时触发.right鼠标右键按下时触发.middle鼠标中键按下时触发
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
