事件修饰符

<div style="height: 150px;background-color: aqua" @click="divClick">

  <input type="button" value="点我" @click="btnClick">

</div>

btnClick divClick  都会调用  因为冒泡机制 先执行btnClick后执行divClick

<div style="height: 150px;background-color: aqua" @click="divClick">

  <input type="button" value="点我" @click.stop="btnClick">

</div>

只会调用btnClick 方法  因为.stop阻止了冒泡

<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

.prevent可以阻止默认的事件  只调用linkClick事件   不跳转链接

<div style="height: 150px;background-color: aqua" @click.capture="divClick">

  <input type="button" value="点我" @click="btnClick">

</div>

.capture  捕获事件 先调用父类方法divClick    再去执行btnClick

<div style="height: 150px;background-color: aqua" @click.self="divClick">

  <input type="button" value="点我" @click="btnClick">

</div>

.self 只有点击自己才会执行divClick事件   冒泡 捕获到它的都不行    但是冒泡 捕获只阻止自己的   不会阻止他父类的冒泡 捕获

.stop阻止了冒泡  是自己以及他的父类的

<div style="height: 150px;background-color: aqua" @click.self="divClick">

  <input type="button" value="点我" @click.once="btnClick">

</div>

.once  只能执行一次