VUE中的事件修饰符

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

   <a href="http://baidu.com" @click.prevent="showInfo">点我提示信息</a>//增加prevent后阻止a标签的默认事件

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

   <div @click="showInfo">
   　　<div @click.stop="showInfo">点我提示信息</div>
   </div>

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

   <div @click.once="showInfo">点我提示信息</div>

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

   <div @click.capture="showMsg(1)">
   　　<div @click="showMsg(2)">点我提示信息</div> //事件分为捕获模式和冒泡模式，先进行捕获再执行冒泡，增加capture后，可让事件转换为捕获模式触发，也就是这个情况下优先输出1
   </div>
   
   function showMsg(sign){
   　　console.log(sign)  //输出  1/2
   }
   

5. self：只有event.target是当前元素时触发（也可用来阻止冒泡）

   <div @click.self="showInfo">
   　　<div @click="showInfo">点我提示信息</div>  //这样点击子级触发事件，父级就不会触发，event.target输出为<div>点我提示信息</div>
   </div>

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

   <ul style="width:200px;height:200px;overflow:auto" @wheel.passive="demo">  //wheel是滚轮滚动事件  每次滚轮滚动触发该事件    scroll是滚动条事件  scroll无法体现passive的作用 他优先执行滚动条上下
          <li style="height:100px">1</li>
          <li style="height:100px">2</li>
          <li style="height:100px">3</li>
          <li style="height:100px">4</li>
   </ul>
   
   function demo(){
   　　for(var i=0;i<1000000;i++;){
   　　　　console.log('@')
   　　}
   　　console.log('累坏了')   //这个情况下 会先输出1000000次@和累坏了   才会往下走一下滚动条
   }