vue事件修饰符

事件修饰符

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

   <a href="" @click.prevent="showInfo"></a>
   //a标签只走点击事件，并不会跳转页面
   

2. stop：组织事件冒泡（常用）；

   <div @click="@showInfo">
       <button @click.stop="showInfo">xxx</button>
   </div>
   //阻止事件涉及到div上，及走两次点击事件
   

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

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

   <div @click.capture="showMsg(1)">
       div1
       <div @click="showMsg(2)">
           div2
       </div>
   </div>
   //本身在没有加capture时，会 以冒泡的形式进行，先触发内层事件 ，在触发外层 在加上后，以捕获的方式进行，先外层再内层
   

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

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