v-on事件
v-on指令用於綁定事件，例如：
v-on指令簡寫：
v-on:click="show" 可以簡寫爲 @click="show"
v-on:mouseover="show" 可以簡寫爲 @mouseover="show"
v-on事件修飾符
prevent
<!-- 阻止跳轉行爲 -->
<div id="box">
<div @click="alert1()">
<a href="/#" @click.prevent="alert2()">a標籤
<div @click="alert3()">div標籤</div>
</a>
</div>
</div>
執行效果如下：
點擊 a標籤 ，彈框，不跳轉
點擊 div標籤，彈框，不跳轉
也就是 在click事件綁定 prevent 修飾符阻止頁面跳轉。
self
<!-- 阻止事件冒泡點擊行爲，主觀性 -->
<div id="box">
<div @click="alert1()">
<a href="/#" @click.self="alert2()">a標籤
<div @click="alert3()">div標籤</div>
</a>
</div>
</div>
執行效果如下：
點擊 a標籤 彈框，跳轉
點擊 div標籤，不彈框，跳轉
也就是 self 修飾符 只阻止事件冒泡的事件行爲，不阻止自身的事件行爲，具有主觀性。
native
<!-- 阻止默認事件行爲 -->
<div id="box">
<div @click="alert1()">
<a href="/#" @click.native="alert2()">a標籤
<div @click="alert3()">div標籤</div>
</a>
</div>
</div>
點擊 a標籤，不彈框，跳轉
點擊 div標籤，不彈框，跳轉
也就是native修飾符阻止默認事件（點擊）行爲，既阻止自己事件行爲，也阻止冒泡事件行爲。
v-on事件修飾符組合分析(敲黑板、畫重難點)
prevent.self
<!-- 官網：阻止所有點擊 -->
<div id="box">
<div @click="alerttt()">
<a href="/#" @click.prevent.self="alertrrrr()">a標籤
<div @click="alertllll()">div標籤</div>
</a>
</div>
</div>
點擊 a標籤，彈框，不跳轉
點擊 div標籤，不彈框，不跳轉
意思是：click prevent self 結合時，自己事件行爲（點擊 a標籤）時，會執行 click（單擊） 和 prevent（阻止跳轉） 行爲，不觸發 self（阻止事件，即彈框），也就是 self 沒有起到阻止彈框的作用，於是效果是：彈框，不跳轉； 而事件冒泡（點擊div標籤）時，會執行 click prevent 和 self 三個關鍵字，效果就是：不彈框，不跳轉。
self.prevent
<!-- 官網：阻止元素自身的點擊 -->
<div id="box">
<div @click="alerttt()">
<a href="/#" @click.self.prevent="alertrrrr()">a標籤
<div @click="alertllll()">div標籤</div>
</a>
</div>
</div>
點擊 a標籤，彈框，不跳轉
點擊 div 標籤，不彈框，跳轉
也就是 click self prevent 三者結合時，自己事件行爲（點擊 a標籤）時，執行 click 和 prevent 行爲，而事件冒泡時，會執行 click 和 self 行爲。
native.prevent / prevent.native
<!-- 阻止默認行爲 -->
<!-- native和prevent組合時，native執行了，prevent就不會執行，native優先級>prevent -->
<!-- 點擊自己不顯示，跳轉；事件冒泡不顯示，跳轉-->
<div id="box">
<div @click="alerttt()">
<a href="/#" @click.native.prevent="alertrrrr()">a標籤
<div @click="alertllll()">div標籤</div>
</a>
</div>
</div>
點擊 a標籤，不彈框，跳轉
點擊 div標籤，不彈框，跳轉
當 click native prevent 三者結合時，效果與 click native 兩個修飾符相同，沒有執行 prevent 修飾符。
總結分析
當事件修飾符組合使用時，需要注意優先級情況：
- prevent 在前時，修飾的是v-on 事件，不管是 自己事件行爲還是冒泡事件行爲，都會執行 prevent 行爲，也就是阻止跳轉。
- prevent 在後時，修飾的是 v-on 被 self 修飾後的 事件，當執行 self 行爲時，不執行 prevent 行爲， 當不執行 self 行爲時，執行 prevent 行爲。
- 只要有 self 修飾符時， 自己事件行爲，就不會執行 self (阻止事件) 行爲，也就是彈框，而冒泡會執行 self 行爲，也就是不彈框。
- native 與其他結合使用時，不管順序如何，和單獨的 native 行爲，效果都相同，也就是 事件中只要有 native 修飾，別的修飾符有不起作用了。
本篇博客爲個人理解的總結，如有錯誤，請指正！