<template>
?<div>
? ?<button @click="click_btn_1(2)">{{count}}</button>
?</div>
<!-- ?click外層 0-4-28 可見執(zhí)行的邏輯是(*3+2)*2 ?最先執(zhí)行的內層 然后是中層 外層-->
?<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 可見執(zhí)行的邏輯是(*2+2)*3 最先執(zhí)行的外層 然后是中層 內層 可見捕獲的順序是由外到內-->
?<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外層只執(zhí)行 *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事件只觸發(fā)一次-->
?<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>
<!-- ?事件修飾可以串聯(lián)使用 同時實現(xiàn)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屬性是當前組件才觸發(fā)-->
<!-- ?Prevent 禁止默認的事件-->
<!-- ?passive 不禁止默認的事件-->
</template>

<script>
export default {
?name: "listen",
?data(){
? ?return{
? ? ?count: 0,

? ?}
?},
?methods:{
? ?// 點擊事件: count的值參數(shù)平方后 + 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>