vue使用v-on指令监听DOM事件，之前我们有用过v-on指令实现增加数字的需求，我们把那个例子改改拿出来：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue事件处理</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont{ font-size: 20px; color: pink; font-weight: bold; } .num0{ font-size: 18px; color: green; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p>{{num}}</p> <button v-on:click="plusOne()">数字加一</button> </div> <script> var myApp = new Vue({ el: '.myApp', data: { num: 0 }, methods: { plusOne: function(){ this.num ++; } } }); </script> </body> </html>
上面是v-on最基础的使用方法，此外v-on还有修饰符。
先来看看事件修饰符：.stop、.prevent、capture、.self、.once、.passive，我们引用一下官网的例子：
<!-- 阻止单击事件继续传播 --> <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> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
使用事件修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
此外还有按键修饰符，以下是常用的按键码的别名：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right。
系统修饰符：.ctrl、.alt、.shift、.meta。注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
鼠标按键修饰符：.left、.right、.middle。