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 { 150px;height: 150px;background:pink;}
#bb {margin: 0 auto;text-align: center; 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>
