v-on

官方連結 v-on
v-on 的修飾符滿多的，我們在第三天有先提過很常用到的 prevent，
接著要來聊聊其他的修飾符。

stop

.stop - 调用 event.stopPropagation()。

stopPropagation() 在MDN的解釋是

阻止呼叫此方法的當前事件，繼續執行捕獲傳遞或冒泡傳遞。

好，都是中文字。
來看看這篇比較容易理解：
[jQuery] event.preventDefault() 與 event.stopPropagation() 的差異

假如：

<p id='p1'>
    <a href='#' id='a1'>sample</a>
</p>

在 #p1跟 #a1各自設定點擊後有不同的 console.log()訊息，
如果只點擊<p>就只跳出一個console.log()；
但是點擊<a>就會跳兩個，<p>的也會跳出來。
加上 stopPropagation()就可以停止傳導，範例而言使得點擊<a>只跳一個。

在vue中的範例：

<button @click.stop="doThis"></button>

capture

添加事件侦听器时使用 capture 模式。

上個舉例在觀察console.log()時，是由內而外傳遞，從<a>傳到<p>，
這個 capture就是讓傳導順序倒過來

self

只当事件是从侦听器绑定的元素本身触发时才触发回调。

只觸發自己，不傳導。
「可是stop也做得到啊！」
stop是停止向外傳遞，假如我們想要在<a>裡面再包一個<span>，甚至再包更多，
只要多包一層就會有內外傳遞的關係，用self讓該元素不進行傳導行為。
可以在每個元素都加上self讓它們每個都沒有傳遞關係selfish!

once

只触发一次回调。

嗯... 很白話BJ4
用前面的例子來說，只會看到一次的console.log，之後的任何點擊都不會有作用

按鍵修飾符

跟keyup搭配的修飾符，例如在<input>按下 enter會觸發事件。可用key code或別名。
按键修饰符：全部的按键别名

<input @keyup.enter="onEnter">

系統修飾鍵

系统修饰键
舉例：我想要讓 user按著 ctrl時點擊才觸發事件，這個情況用的修飾符。

<div @click.ctrl="doSomething">Do something</div>

全部的系統修飾符只有四個：

• ctrl
• alt
• shift
• meta

「等等，meta是誰？」
在 mac系統就是 cmd，在 windows系統就是旗幟圖案的 windows鍵。

串連修飾符

就像那些年我們一起學的 chain rule， 連用的意思

<button @click.stop.prevent="doThis"></button>

小結

按鍵修飾符很適合拿來做互動小遊戲。現在讀書會同時在看 JS&JQ進化之道，感覺時間頗不夠，說不定哪天會直接拿那本書的 hackMD筆記來用當作番外篇XD