Vue.js教程之事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。event.preventdefault()：阻止默认事件发生，例如：a标签默认会刷新，表单的提交。
event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。
如图所示：嵌套div，每一个div都有click事件，点击目标事件，先走捕获->目标->冒泡由此可以看出捕获是从外到内依次执行click事件，而冒泡是从内到外依次执行click事件

事件修饰符：

.stop 阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

.prevent 阻止默认事件的发生，  默认事件指对DOM的操作会引起自动执行的动作， 比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

.capture 捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture="doThis">...</div>

.self 将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响（冒 泡或捕获的都不执行）

<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

.once 设置事件只能触发一次，比如按钮的点击等。