[Vue] 事件修饰符 .stop .capture .prevent .self .once 用法详解

Vue 事件修饰符（.stop .capture .prevent .self .once）的用法与解释如下。

普通绑定事件

<div id="app" style="background:red;" v-on:click="divclick">
  <input type="button" v-on:click="buttonclick" value="点我">
</div>

默认事件顺序：先显示“你刚才点击了一下 button”，再显示“你刚才点击了一下 DIV”（冒泡）。

.stop 修饰符

<input type="button" v-on:click.stop="buttonclick" value="点我">

在 button 的 click 上加 .stop 后，终止向外冒泡，只显示“你刚才点击了一下 button”，不会触发外层 div。

.capture 修饰符

<div id="app" v-on:click.capture="divclick"> ... </div>

在 div 的 click 上加 .capture 后实现捕获，从外到内执行：先显示 DIV，再显示 button。

.self 修饰符

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

加 .self 后，只有点击元素自身才执行其绑定事件，不会执行父类或子类的事件。

.prevent 修饰符

<a href="http://www.beasure.com" v-on:click.prevent="aclick">本硕科技</a>

加 .prevent 后终止默认行为，比如 a 链接将无法跳转。

.once 修饰符

<a href="http://www.beasure.com" v-on:click.prevent.once="aclick">本硕科技</a>

加 .once 后只触发一次：第一次点击不跳转，第二次点击时 .prevent 失效，将会跳转链接。

Vue 实例代码

var vm = new Vue({
  el: "#app",
  data: {},
  methods: {
    buttonclick: function(){ console.log("你刚才点击了一下 button"); },
    divclick: function(){ console.log("你刚才点击了一下 DIV"); },
    aclick: function(){ console.log("你刚才点击了一下 A 链接"); }
  }
})