先看一段基本的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueBaseCode</title>
<script src="./lib/vue.js"></script>
<style>
.inner {
width: 150px;
height: 168px;
background-color: darkblue;
}
.outer {
height: 256px;
background-color: darkgreen;
}
</style>
</head>
<body>
<div id="app" >
<div class="outer" @click="divOuterClick">
<div class="inner" @click="divInnerClick">
<input type="button" value="按钮" @click="btnClick">
</div>
</div>
<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
divOuterClick() { console.log("Outer"); },
divInnerClick() { console.log("Inner"); },
btnClick() { console.log("Button"); },
linkClick() { console.log("linkClick"); }
}
});
</script>
</body>
</html>一、.stop阻止事件冒泡
当我们在按钮上点击时，会顺序触发btnClick，divInnerClick，divOuterClick三个方法，为了避免按钮被点击时出现这种冒泡现象，我们可以在按钮的click事件上使用.stop指令，像这样：
<div id="app" class="outer" @click="divOuterClick">
<div class="inner" @click="divInnerClick">
<input type="button" value="按钮" @click.stop="btnClick"><!--阻止冒泡-->
</div>
</div>
<a href="http://www.baidu.com" @click="linkClick">去百度</a>这样在点击按钮之后就只是执行按钮中的方法，不再冒泡。
二、.self只有自身在点击时才会触发事件，不受冒泡影响。
<div id="app" >
<div class="outer" @click="divOuterClick">
<div class="inner" @click.self.stop="divInnerClick"><!--自身点击才触发事件的同时阻止冒泡-->
<input type="button" value="按钮" @click="btnClick">
</div>
</div>
<a href="http://www.baidu.com" @click="linkClick">去百度</a>
</div>这里面实际上在inner这个div的click事件上添加了self修饰符，保证只有自身被点击时才会触发事件，但其不会阻止自身向上冒泡，所以在其后面追加了.stop修饰符，这样就只有这个div自身产生事件了。
三、.capture捕获机制
<div id="app" >
<div class="outer" @click.capture="divOuterClick"><!--捕获机制-->
<div class="inner" @click="divInnerClick">
<input type="button" value="按钮" @click="btnClick">
</div>
</div>
<a href="http://www.baidu.com" @click="linkClick">去百度</a>
</div>这里给outer这个div的click事件添加了.capture修饰符，这样在事件冒泡过程中，这个事件总是首先执行，然后才执行其他的事件。
四、.once修饰符只起一次作用
<div id="app" >
<div class="outer" @click="divOuterClick">
<div class="inner" @click="divInnerClick">
<input type="button" value="按钮" @click.stop.once="btnClick"><!--修饰符只起一次作用-->
</div>
</div>
<a href="http://www.baidu.com" @click="linkClick">去百度</a>
</div>这里给按钮的click事件在添加了.stop阻止冒泡修饰符之后又添加了.once修饰符，这个once修饰符让click事件只起一次作用的情况下，让.stop也只其一次作用，也就是说再按钮点击一次之后，该按钮的事件不再执行，同时也不再阻止事件冒泡。
五、.prevent阻止默认行为
<div id="app" >
<div class="outer" @click="divOuterClick">
<div class="inner" @click="divInnerClick">
<input type="button" value="按钮" @click="btnClick">
</div>
</div>
<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a><!--阻止默认行为-->
</div>这里在链接的click事件后面添加了.prevent修饰符，来阻止默认的页面跳转行为，只是执行onclick的绑定方法linkClick。