事件处理
v-on
我们可以用v-on来监听事件，后面跟上 “:事件名称”决定监听哪个事件，在赋值语句中声明可以带上方法名或内联语句。
它还有一种缩写格式：@
如：
方法名<input type="button" value="验证" v-on:click.stop="Valid" />
内联语句：<input type="button" value="验证" v-on:click.stop="Valid($event)" />
我们在一些时候需要阻止默认事件或停止事件冒泡，这是我们常常会用到event.preventDefault() 或 event.stopPropagation()，Vue帮我们封装了这些方法，只需要在事件名称后面添加.prevnet或.stop即可。
如：
<div id="app" v-on:click="FormClick">
<form>
<!--
.stop可以停止事件的冒泡，这样就不会触发Form的FormClick事件了
-->
<input type="button" value="验证" v-on:click.stop="Valid" />
<!--
.prevent阻止默认行为，表单不会提交了
-->
<input type="submit" v-on:click.prevent="Submit" />
</form>
</div>在2.1.4版本中还新增了.once修饰符，它表示只触发一次事件处理函数。
在2.3.0中新增了.passive修饰符，它对应addEventListener中的passive选项，能够提高移动端的性能。它表示事件处理函数永远不会调用preventDefault()。
可以参考这篇文章：Passive事件监听器
在监听键盘事件时，我们经常要检查常见的键值，一般通过keyCode来判断点击了哪个按钮。Vue中定义了一些常用的按键修饰符如：.enter .tab .esc .space .left .right .delete 等。
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
