vue事件监听和修饰符
<template>
<div>
<button @click="click_btn_1(2)">{{count}}</button>
</div>
<!-- click外层 0-4-28 可见执行的逻辑是(*3+2)*2 最先执行的内层 然后是中层 外层-->
<div @click="click_1" style="border: 1px solid #3793de">
<div @click="click_2" style="border: 1px solid #3793de">
<div @click="click_3" style="border: 1px solid #3793de">{{count}}</div>{{count}}
</div>{{count}}
</div>
<!-- click外层 0-6-42 可见执行的逻辑是(*2+2)*3 最先执行的外层 然后是中层 内层 可见捕获的顺序是由外到内-->
<div @click.capture="click_1" style="border: 1px solid #3793de">
<div @click.capture="click_2" style="border: 1px solid #3793de">
<div @click.capture="click_3" style="border: 1px solid #3793de">{{count}}</div>{{count}}
</div>{{count}}
</div>
<!-- click外层只执行 *3 使用stop修饰符可以阻止时间的传递-->
<div @click.stop="click_1" style="border: 1px solid #3793de">
<div @click.stop="click_2" style="border: 1px solid #3793de">
<div @click.stop="click_3" style="border: 1px solid #3793de">{{count}}</div>{{count}}
</div>{{count}}
</div>
<!-- once事件只触发一次-->
<div @click.once="click_1" style="border: 1px solid #3793de">
<div @click.once="click_2" style="border: 1px solid #3793de">
<div @click.once="click_3" style="border: 1px solid #3793de">{{count}}</div>{{count}}
</div>{{count}}
</div>
<!-- 事件修饰可以串联使用 同时实现stop 和once-->
<div @click.once.stop="click_1" style="border: 1px solid #3793de">
<div @click.once.stop="click_2" style="border: 1px solid #3793de">
<div @click.once.stop="click_3" style="border: 1px solid #3793de">{{count}}</div>{{count}}
</div>{{count}}
</div>
<!-- 其他的事件修饰符 -->
<!-- self 当事件对象的target属性是当前组件才触发-->
<!-- Prevent 禁止默认的事件-->
<!-- passive 不禁止默认的事件-->
</template>
<script>
export default {
name: "listen",
data(){
return{
count: 0,
}
},
methods:{
// 点击事件: count的值参数平方后 + 1
click_btn_1(event){
this.count = Math.pow(this.count, event)
this.count += 1
},
//
click_1(){
this.count = this.count * 2
},
click_2(){
this.count = this.count + 2
},
click_3(){
this.count = this.count * 3
}
}
}
</script>
<style scoped>
</style>
