Vue中的事件修饰符

vue中一共有六个事件修饰符

1、prevent

写法示例：@click.prevent="xxx'

说明：阻止默认事件的触发

案例：

<a href="https://www.baidu.com/"  @click="showInfo"></a> 

先执行showInfo方法，然后跳转到百度。如果只是想执行showInfo方法， 而不跳转，那么可以用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方法，那么可以这样写

<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'

说明：事件的默认行为立即执行，无需等待事件回调执行完毕。

不是所有事件都会先执行回调。比如wheel滚轮事件是先执行回调，而scroll事件是先执行默认行为，再回调。