1、冒泡与捕获：
冒泡：由内向外触发；捕获：由外向内触发
2、修饰符
（1）.stop修饰符：阻止事件冒牌，不让他向外触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="element1">
<div @click="test1">
<span>测试1</span>
<div @click.stop="test2">
<span>测试2</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#element1",
// data:{
// },
methods:{
test1:function(){
console.log("click1");
},
test2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>
结果：不添加.stop会输出click2,click1，添加.stop后只显示click2
（2）.capture 捕获事件，点击子节点，会从外向内触发
输出结果顺序变成：点击测试2，输出click1,click2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="element1">
<div @click="test1">
<span>测试1</span>
<div @click.stop="test2">
<span>测试2</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#element1",
// data:{
// },
methods:{
test1:function(){
console.log("click1");
},
test2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>
（3）.self只会触发自己范围内的事件，不会包含子元素
（4）.once，只要点击按钮只会执行一次
结果：无论点击多少次click2，只会在第一次点击输出 click2 ,click1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="element1">
<div @click.once="test1">
<span>测试1</span>
<div @click.once="test2">
<span>测试2</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#element1",
// data:{
// },
methods:{
test1:function(){
console.log("click1");
},
test2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/CXMS/p/13530352.html