Vue中的事件修饰符

Vue里面的事件修饰符，可以阻止冒泡行为，和一些默认行为等等，让我们看看具体是怎么使用的。

.stop(阻止冒泡)

<div class="inner" @click="div1Handler">
    <input type="button" value="戳他" @click.stop="btnHandler">
</div>

.prevent(阻止默认行为)

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

上面这一行代码并没有跳转到百度，因为.prevent 阻止了a标签的默认行为

.capture(实现捕获触发事件的机制)

<div class="inner" @click.capture="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
</div>

.self（实现只有点击当前元素时候，才会触发事件处理函数)

<div class="inner" @click="div1Handler">
   <input type="button" value="戳他" @click="btnHandler">
</div>

.once（实现支触发一次事件处理函数）

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

.stop 和.self 的区别

.self  指挥阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡行为