.stop                // 阻止事件傳遞
   .prevent          // 停止默認(rèn)事件
   .self                // 自身執(zhí)行
   .capture         // 使用捕獲模式
   .once             // 只執(zhí)行一次
   .passive         // 立即執(zhí)行

<div @click="shout(1)">
      <button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>

 <div @click="shout(1)">
        <button @click.stop="shout(2)">點(diǎn)擊查看內(nèi)容</button>
 </div>

<div @click="shout(1)">
       <button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>
 methods: {
      shout(e){
           e.stopDefault()
       }
}

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="showInfo">點(diǎn)我提示信息</a>

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="showInfo">點(diǎn)我提示信息</a>

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="showInfo($event)">點(diǎn)我提示信息</a>       
methods: {
     showInfo(e){
            e.preventDefault()
      }
}

<div class="outer" @click="outer">
    <div class="middle" @click.self="middle"> 
　　　<button @click="inner">點(diǎn)擊</button>
   </div>
</div>

<!--  captrue:使用事件的捕捉模式 -->
<div class="box1" @click.capture="showMsg(1)">
      div1 
      <div  class="box2" @click="showMsg(2)">
             div2
      </div>
</div>
上面的執(zhí)行順序是1、2