事件修饰符

Vue中的事件修饰符

1. prevent：阻止默认事件（常用）
2. stop：阻止事件冒泡（常用）
3. once：事件只触发一次（常用）
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

 1. prevent

写法示例：@click.prevent="xxx'
案例：
<a href="https://www.baidu.com/" @click="show"></a> 
先执行showInfo方法，然后跳转到百度。如果只是想执行show方法，而不跳转，那么可以用prevent修饰。
<a href="https://www.baidu.com/" @click.prevent="showInfo"></a> 

2. stop

写法示例：@click.stop="xxx'
案例：
<div @click="showInfo1">
   <div @click="showInfo2"></div>
</div>

如上所示，点击中间的div会触发最外层的div点击事件。如果只是先触发showInfo2方法，那么就可以使用stop
<div @click="showInfo1">
   <div @click.stop="showInfo2"></div>
</div>

3. once

事件只出发一次
写法示例：@click.once="xxx'

4. capture

写法示例：@click.capture="xxx'
使用事件的捕获模式，让事件在魔火的时候就被出发，正常流程是先捕获在冒泡，捕获由外向内，冒泡由内向外

5. self

写法示例：@click.self="xxx'
只有当前event.target是当前操作的元素才触发事件

6. passive

写法示例：@click.passive="xxx'
事件的默认行为立即执行，无需等待事件回调执行完毕。