VUE.JS的事件修饰符介绍

事件修饰符：

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

---

.stop 阻止冒泡

    <!-- 使用  .stop  阻止冒泡 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> 

这样子的话，点击button按钮，只会触发它的点击事件，因为加上了.stop事件修饰符，所以这时候div不会触发事件，也就是成功阻止了冒泡。

.prevent 阻止默认事件

    <!-- 使用 .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

因为a标签的默认行为是跳转到对应的URL，如果没有使用 .prevent 阻止默认行为，则点击以上那个a标签，会自动跳转到百度，效果如下：

加上了 .prevent 阻止默认行为，则不会进行跳转，效果如下：

.capture 添加事件侦听器时使用事件捕获模式

    <!--