Vue.js 事件处理器

#前端老阿姨成长笔记

事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

1. 阻止单击事件冒泡

<a v-on:click.stop="doThis" />

3. 提交事件不再重载页面

<a v-on:submit.prevent="onSubmit" />

5. 修饰符可以串联

<a v-on:click.stop.prevent="doThat" />

7. 只有修饰符

<form v-on:submit.prevent/>

9. 添加事件侦听器时使用事件捕获模式

<div v-on:click.capture="doThis" />

11. 只当事件在该元素本身（而不是子元素）触发时触发回调

<div v-on:click.self="doThat" />

12. click 事件只能点击一次，2.1.4版本新增

<a v-on:click.once="doThis" />

按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

常见的按键别名：enter、tab、delete (捕获 “删除” 和 “退格” 键)、esc、space、up、down、left、right、ctrl、alt、shift、meta