后续

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在 methods中轻松实现这点，但更好的方式是：methods只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop .prevent .capture .self

<!-- 阻止单击事件冒泡 --> <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>

按键修饰符

在侦听键盘事件时，我们经常需要检测常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是13时调用 vm.submit() --> <input v-on:keyup.enter="submit" /> <!-- 缩写语法 --> <input @keyup.enter="submit" />

全部的按键别名： enter tab delete (捕获 “删除” 和 “退格” 键) esc space up down left right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112

为什么在HTML中监听事件？

我可能注意到这种事件监听的方式违背了关注点分离传统理念。不用担心，因为所有的Vue。 js事件处理方法和表达式都严格绑定在当前视图的viewModel上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1、扫一眼HTML模版便能轻松定位在JavaScript代码里对应的方法； 2、因为无序在JavaScript里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试； 3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。你毋须担心如何自己清理它们。