在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。如下所示：
1 <button v-on:click="counter += 1">Add 1</button> 2 <p>按钮被点击了 {{ counter }} 次.</p>
其中counter为Vue自定义的一个属性值。
事件处理方法
事实上，许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。如下所示：
1 <button v-on:click="greet">Greet</button>
greet 是在下面定义的方法名。如下所示：
1 <script type="text/javascript"> 2 var app=new Vue({ 3 el:'#app', 4 data:{ 5 msg:'hello world!!!', 6 counter:0, 7 name: 'Vue.js' 8 }, 9 // 在 `methods` 对象中定义方法 10 methods:{ 11 greet: function (event) { 12 // `this` 在方法里指向当前 Vue 实例 13 alert('Hello ' + this.name + '!') 14 // `event` 是原生 DOM 事件 15 if (event) { 16 alert(event.target.tagName) 17 } 18 }, 19 20 } 21 }); 22 </script>
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，如下所示：
1 <button v-on:click="say('hi')">Say hi</button> 2 <button v-on:click="say('what')">Say what</button>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
1 <button v-on:click="warn('表单不能被提交.', $event)">提交</button>
其中say，warn均为自定义方法，如下所示：
1 say: function (message) { 2 alert(message); 3 }, 4 warn: function (message, event) { 5 // 现在我们可以访问原生事件对象 6 if (event) { 7 event.preventDefault(); 8 } 9 alert(message); 10 }
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。事件修饰符共以下几种：
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
1 <!-- 阻止单击事件继续传播 --> 2 <a v-on:click.stop="doThis">点击666</a> 3 <!-- 提交事件不再重载页面 --> 4 <form v-on:submit.prevent="onSubmit"> 5 <div>阻止提交</div> 6 </form> 7 <!-- 修饰符可以串联 --> 8 <a v-on:click.stop.prevent="doThat"></a> 9 <!-- 只有修饰符 --> 10 <form v-on:submit.prevent> 11 <div id="d">只有修饰符</div> 12 </form> 13 <!-- 添加事件监听器时使用事件捕获模式 --> 14 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> 15 <div v-on:click.capture="doThis">doThis...</div> 16 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 17 <!-- 即事件不是从内部元素触发的 --> 18 <div v-on:click.self="doThat">doThat...</div>