Vue.js 事件修饰符的使用教程

<input type="button" value="点击" @click="btnHandlerClick" />
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
divHandlerClick() {
alert('我是div的点击事件！')
},
btnHandlerClick() {
alert('我是button的点击事件')
}
}
});
</script>

这时候，如果我们不希望出现事件冒泡，则可以使用 Vue 内置的修饰符便捷的阻止事件冒泡的产生。因为我们是点击 button 后产生的事件冒泡，我们只需要在 button 的点击事件上加上 stop 修饰符即可，示例代码如下。

<input type="button" value="点击" @click.stop="btnHandlerClick" />

b）.prevent：阻止默认事件

阻止默认事件这个也很好理解，有些标签本身会存在事件，例如，a 标签的跳转，form 表单中 submit 按钮的提交事件等等，在某些时候我们只想执行我们自己设置的事件，这时，就需要阻止标签的默认事件的执行，原生的 js 我们可以使用 preventDefault 方法来实现，而在 Vue 中，我们只需要使用 prevent 关键字就可以了。

在下面的示例中，我们为 a 标签添加了一个点击事件，由于 a 标签本身具有默认的跳转事件，此时，当我们点击后，最终还是会执行 a 标签的默认事件。

 <a href="http://www.baidu.com" @click="aHandlerClick">链接跳转</a>
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    aHandlerClick() {
     alert('我是a标签的点击事件')
    }
   }
  });
 </script>

在 Vue 中，当我们想要阻止元素的默认事件，只需要在绑定的事件后使用 prevent 修饰符即可，示例代码如下。

<a href="http://www.baidu.com" @click.prevent="aHandlerClick">链接跳转</a>

c）.capture：添加事件监听器时使用事件捕获模式

在上面的学习中我们了解到，事件捕获模式与事件冒泡模式是一对相反的事件处理流程，当我们想要将页面元素的事件流改为事件捕获模式时，只需要在父级元素的事件上使用 capture 修饰符即可，还是上面的例子的代码，当我们在 div 绑定的点击事件上使用 capture 修饰符后，我们点击按钮首先触发的就是最外侧的 div 的事件。