Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令后綴來調用修飾符。其中.stop就是用來阻止單擊事件冒泡，用法如：
<a v-on:click.stop="doThis"></a>
下面是全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue .stop阻止冒泡</title>
</head>
<style>
#aa {width: 150px;height: 150px;background:pink;}
#bb {margin: 0 auto;text-align: center;width: 100px;height: 80px;background:orange;}
</style>
<body>
<script type="text/javascript" src="vue.min.js"></script>
<div id="app">
<div id="aa" @click="doaa">
<div id="bb" @click="dobb">
<a id="cc" @click.stop="docc" href="#">點我阻止冒泡</a>
</div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
},
methods:{
doaa:function(){
alert("do aa");//點擊cc部分，不發生冒泡
},
dobb:function(){
alert("do bb");//點擊bb，即橙色，發生冒泡，執行函數dobb,doaa
},
docc:function(){
alert("do cc---.stop");
}
}
})
</script>
</body>
</html>
