事件修饰符--.stop阻止冒泡事件--.prevent阻止默认行为（链接跳转）----事件修饰符可以串联使用---只触发一次.once

<!-- 使用  .stop  阻止冒泡 -->
   <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> 

.prevent阻止默认行为（阻止链接跳转）

<!-- 使用 .prevent 阻止默认行为 -->
 <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> 

.capture捕获机制---先执行父标签，也就是上一级外层事件，在执行内部触发的事件，自外向内

原本为由内向外-也就是冒泡事件--现在是由外向内触发

<!-- 使用  .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div> 

.self只有点击自己猜触发

 <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> 

.once

 <!-- 使用 .once 只触发一次事件处理函数 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->

 

 <!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> 

    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>