Vue中的事件修饰符

1.prevent：阻止默认事件（常用）；

<a href="#" @click.prevent="showInfo">点我</a>

2.stop：阻止事件冒泡（常用）；

<button @click.stop="showInfo">点我</button>

3.once：事件只触发一次（常用）；

<button @click.once="showInfo">点我</button>

4.capture：使用事件的捕获模式；

<div class="box1" @click.capture="show1">
    div1
    <div class="box2" @click="show2">
        div2
    </div>
</div>

5.self：只有event.target是当前操作的元素时才触发事件；

<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
<ul>