Learning address: https://www.bilibili.com/video/BV1mz4y127UG?p=10
<body>
<div class="bgcolor" id="app">
<!-- 内容-->
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
message:'今天好热啊！想吃雪糕！',
tag:'<strong>i am strong</strong>',
tag1:'<a href="http://www.baidu.com">百度</a>',
},
methods:{
fun(){
console.log("这是一条打印")
},
fun1(e){
console.log('~~~~' + e )
}
}
});
</script>
.prevent
<!-- .prevent ———— 阻止默认行为，比如a跳转 -->
<a href="http://www.baidu.com" @click.prevent="fun()">百度</a>
// 结果：只执行fun（）不跳转
.once
<!-- .once ———— 只有第一次触发 -->
<button @click.once="fun()">只能点一次的按钮</button>
.self
<!-- 事件冒泡 -->
<!-- .self ———— 点击本身触发（三层div同时加.self才能生效，否则冒泡还是存在） -->
<div @click.self="fun1('父亲元素')">
父亲元素
<div @click.self="fun1('儿子元素')">
儿子元素
<div @click.self="fun1('孙子元素')">孙子元素</div>
</div>
</div>
// 结果:点击孙子元素只打印“孙子元素”，点击儿子元素只打印“儿子元素”，点击父亲元素只打印“父亲元素”，
.stop
<!-- .stop ———— 阻止当前标签事件冒泡 -->
<div @click="fun1('父亲元素')">
父亲元素
<div @click="fun1('儿子元素')">
儿子元素
<div @click.stop="fun1('孙子元素')">孙子元素</div>
</div>
</div>
// 结果:点击孙子元素只打印“孙子元素”，点击儿子元素打印“儿子元素 父亲元素”
.capture
<!-- .capture ———— 由外到内事件捕获 -->
<div @click.capture="fun1('父亲元素')">
父亲元素
<div @click="fun1('儿子元素')">
儿子元素
<div @click="fun1('孙子元素')">孙子元素</div>
</div>
</div>
// 结果:点击孙子元素打印“父亲元素 儿子元素 孙子元素”，与初始状态相反