知识点：
1，.stop 阻止事件继续传播（冒泡）
2，.prevent阻止标签默认事件
3， .capture添加事件侦听器时使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
4，.self只当event.target事件在该元素本身（比如不是子元素）触发时触发回调
5，.once事件只触发一次
7，.passive 告诉浏览器你不想阻止事件的默认行为
// .stop 阻止事件继续传播（冒泡）
<body> <div id="div1" @click="btn1"> <div id="div2" @click.stop="btn2"> 你好 </div> </div> <script> var vm = new Vue({ el: "#div1", data: { }, methods: { btn1: function() { console.log('点击btn1') }, btn2: function(){ console.log('点击btn2') } } }) </script> </body>
// 给div2添加self事件修饰符，只有点击当前元素才会触事件处理函数，通过冒泡或者捕获是不会执行此事件 <div id="div1" @click="btn1"> <div id="div2" @click.self="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>
<!--默认是冒泡行为，添加capture从外往里执行事件--> <div id="div1" @click.capture="btn1"> <div id="div2" @click="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>
<!--.once事件只触发一次--> <div id="div1" @click.once="btn1"> <div id="div2" @click="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>