<div id="app">
<!-- .stop阻止冒泡行为 -->
<!-- <div class="innerDiv" @click="innerClick">
<input type="button" value="按钮" @click.stop="btnClick" />
</div> -->
<!-- .prevent 阻止默认事件 -->
<!-- <a href="http://www.baidu.com" @click.prevent="aClick">这是一个百度</a> -->
<!-- .capture 实现捕获触发事件的机制 -->
<!-- <div class="innerDiv" @click.capture="innerClick">
<input type="button" value="按钮" @click="btnClick" />
</div> -->
<!-- .stop 和 .self 的区别:.self 只会阻止自己身上的冒泡行为不会阻止别人;.stop 阻止所有的冒泡行为 -->
<!-- .self 阻止自身的冒泡行为 -->
<!-- <div class="outer" @click="outerClick">
<div class="innerDiv" @click.self="innerClick">
<input type="button" value="按钮" @click="btnClick" />
</div>
</div> -->
<!-- .once 只阻止一次 -->
<a href="http://www.baidu.com" @click.prevent.once="aClick">这是一个百度</a>
</div>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
innerClick(){
console.log('这是innerDiv的点击事件');
},
btnClick(){
console.log('这是btn input点击事件');
},
aClick(){
console.log('这是一个a标签');
},
outerClick(){
console.log('这是outer div 的点击事件');
}
}
})