Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰符. 下面是 vue 的 事件修饰符 和 按键修饰符.
事件修饰符
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> <!-- 所有按键别名 --> .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta
下面是一个实际的例子, 执行顺序为: 最外层 > 第二层 > 最里层 > 第三层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> <style> .style1 { width: 100px; height: 100px; background-color: tomato; text-align: center; line-height: 100px; color: white; cursor: pointer; } </style> </head> <body> <div id="app"> <div class="style1" v-on:click.capture="act1"> <!-- 最外层 --> <div v-on:click.capture="act2"> <!-- 第二层 --> <div v-on:click="act3"> <!-- 第三层 --> <div v-on:click="act4"> <!-- 最里层 --> 点击 </div> </div> </div> </div> </div> <script> var vApp = new Vue({ el: "#app", methods: { act1: function () { alert("最外层") }, act2: function () { alert("第二层") }, act3: function () { alert("第三层") }, act4: function () { alert("最里层") } } }) </script> </body> </html>
