方法处理器
可以用 v-on 指令监听 DOM 事件：
<div id="app">
<button v-on:click = "greet">Greet</button>
</div>
Js代码
new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
},
methods:{
greet:function () {
alert("OP");
}
}
})
内联语句处理器
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
<div id="app">
<button v-on:click = "greet('welcome')">Greet</button>
</div>
Js代码
new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
},
methods:{
greet:function (msg) {
alert(msg);
}
}
})
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="say('hello!', $event)">Submit</button>
js代码：
new Vue({
el: '#example',
methods: {
say: function (msg, event) {
// 现在我们可以访问原生事件对象
event.preventDefault()
}
}
})
事件修饰符
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题，Vue.js 为 v-on 提供两个事件修饰符：.prevent 与 .stop。
<!-- 阻止单击事件冒泡 -->
<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>
按键修饰符
在监听键盘事件时，我们经常需要检测 keyCode。Vue.js允许为v-on添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
常用按键别名：enter、tab、delete、esc、space、up、down、left、right。