內置指令 | Vue.js
在vue的api里，關于v-on有stop和once兩個事件標簽。
.stop?- 調用?event.stopPropagation()。.once?- 最多觸發一次處理函數。?
原有主要代碼和頁面效果?（無stop和once）:
...<div class="div" @click="divClick()"><p class="p" @click="pClick()"></p></div>...<script>...divClick(){console.log('div點擊了');},pClick(){console.log('p點擊了');}...</script>
?
.stop
stop用于在頁面表單中，只觸發子元素，不觸發父元素的操作。例如：
<div class="div" @click="divClick()"><p class="p" @click.stop="pClick()"></p></div>效果如下。p元素（綠區）綁定了pClick的指令，p元素是div元素（背景紅區）的子元素，div也綁定了一個事件。點擊p元素，div所綁定的事件沒有被觸發。
?
?.once
once用于在頁面表單中，只觸發子元素，不觸發父元素的操作。例如：
<div class="div" @click="divClick()"><p class="p" @click.once="pClick()"></p></div>效果如下。p元素（綠區）綁定了pClick的指令，p元素是div元素（背景紅區）的子元素，div也綁定了一個事件。點擊p元素兩次，p所綁定的事件只觸發了一次，div所綁定的事件兩次被觸發。?
.stop.once或者.once.stop：
代碼如下：
<div class="div" @click="divClick()"><p class="p" @click.stop.once="pClick()"></p></div>效果如下：
第一次點擊綠區p，只觸發了綠區p的事件，沒有觸發紅區div的事件。?
第二次點擊綠區p，沒有觸發了綠區p的事件，但是觸發了紅區div的事件。?
點擊綠區p第三次，同樣只觸發紅區div的事件，不觸發綠區p的事件。?
?將.stop.once改成.once.stop得到的也是一樣的結果。
...<div class="div" @click="divClick()"><p class="p" @click.once.stop="pClick()"></p></div>......pClick(){console.log('p點擊了 .once.stop');},...
?猜想：
? ? ? ? stop的作用是不觸發當前處理函數所在元素的父級元素處理函數，once的作用是最多觸發一次處理函數。當.stop.once混用的時候，第一次點擊stop和once都對當前元素的函數，其作用范圍只在當前元素上。但是第二次點擊的時候，stop不再起作用了，父級元素可以被多次觸發。
? ? ? ? 因此我猜測，once這個修飾符，在第一次點擊執行后，對當前元素做了去除操作（不知道是邏輯去除還是物理去除，個人偏向物理）。這個操作不僅會去除該元素綁定的處理函數，還會去除該元素上帶有的其他修飾符。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件</title><script src="../../public/script/vue_2.2.2.min.js"></script><style>.div{width: 200px;height: 200px;background-color: red;margin-top: 20px;}.div2{width: 200px;height: 200px;background-color: yellow;margin-top: 20px;}.p{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div id="app"><button @click="add('horse',$event)">加一馬</button><input type="text" :value="age" /><button @click="sub()">減一馬</button><div class="div" @click="divClick()"><p class="p" @click.once.stop="pClick()"></p></div><div class="div2" @click="divClick()"><p @click.stop.once="aClick()" target="_blank">Baidu一下</p></div></div><script>const vm = new Vue({el: "#app",data: {name: 'Calven',age: 24,wechat: 'CalvenZeng'},methods: {add(msg, event){this.age++;console.log(msg);console.log(event);},sub(){this.age--;},divClick(){console.log('div點擊了');},pClick(){console.log('p點擊了 .once.stop');},aClick(){console.log('a點擊了');window.open("https://www.baidu.com", "baidu");}}});</script>
</body>
</html>
)
)
 Crack)
