整體學習Vue時看到Vue文檔中有事件修飾符的描述，但是看了之后並沒有理解是什么意思，於是查閱了資料，現在記錄下來與大家分享
先給大家畫一個示意圖理解一下冒泡和捕獲
(1) .stop修飾符
請看如下代碼
<template>
<div class="about">
<div @click="test1">
<div @click="test2">
測試
</div>
</div>
</div>
</template>
<script>
export default {
methods:{
test1(){
console.log('test1')
},
test2(){
console.log('test2')
}
}
}
</script>
由以上代碼可以看到我們有一個嵌套的div，每一個div都綁定着一個事件，如果我們點擊div的話是按什么順序觸發這兩個事件的呢。其實是默認按照冒泡的方式觸發的，簡單來說就是由內而外，如果還是不明白請看上面的解析圖。
此Vue文件最終生成的界面是這個樣子的
當我們點擊的時候默認按照冒泡方式觸發函數，控制台打印結果如下
現在就是.stop發揮作用的時候了，修改代碼如下
<template>
<div class="about">
<div @click="test1">
<div @click.stop="test2">
測試
</div>
</div>
</div>
</template>
這樣我們在點擊之后控制台打印結果如下
由這個結果我們可以看到，這個修飾符的作用就是阻止事件冒泡，不讓他向外去執行函數，到此為止
(2).prevent修飾符
這個時候我們再來說一下.prevent修飾符，其作用就是阻止組件本來應該發生的事件，轉而去執行自己定義的事件
<template>
<div class="about">
<a href="https://www.cnblogs.com/Jacob98/" @click="test2">跳轉</a>
</div>
</template>
<script>
export default {
methods:{
test2(){
console.log('test2')
}
}
}
</script>
上述代碼我們並沒有添加.prevent修飾符，接下來的結果我們應該可以想到，點擊之后會跳轉到我寫的網址中(也就是我的博客😎)，當時當我們對這個代碼稍作修改
<template>
<div class="about">
<a href="https://www.cnblogs.com/Jacob98/" @click.prevent="test2">跳轉</a>
</div>
</template>
點擊之后就不會跳轉到相應的網址，而是去執行我寫的函數
(3).capture修飾符
其實這個的理解就很簡單，就想我們第一節所說，網頁是默認按照冒泡方式去觸發函數的，但是當我們使用.capture修飾符時，網頁就會按照捕獲的方式觸發函數，也就是從外向內執行，但是這個時候一定要注意，.capture修飾符一定要寫在外層才能生效，原因大家應該能自己想清楚。
<template>
<div class="about">
<div @click.capture="test1">
<div @click.stop="test2">
測試
</div>
</div>
</div>
</template>
控制台打印結果如下
(4).once修飾符
這個理解起來就更加簡單了，加上此修飾符之后相應的函數只能觸發一次，無論你點擊多少下，函數就只觸發一次。這個有一個用途就是防止用戶多次點擊造成應用數據錯誤。比如說用戶點擊支付按鈕，由於客戶機器比較卡頓，點擊一下之后沒有立即反應就又點了一下，這個時候有可能就會造成多次扣費，降低用戶體驗。
(5).self修飾符
當前元素自身時觸發處理函數時才會觸發函數，原理：是根據event.target確定是否當前元素本身，來決定是否觸發的事件/函數
實例：如果點擊內部點擊2，冒泡不會執行gett方法，因為event.target指的是內部點擊2的dom元素，不是外部點擊1的，所以不會觸發自己的點擊事件
<div v-on:click.self="test1">
test1
<div v-on:click="test2">
test2
</div>
</div>