iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
1
Modern Web

log Vue 一下系列 第 10

Vue一下 十日:一直看著 v-on背影的修飾符們

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


上一篇
Vue一下 九日:表單的一些細節們,lazy絕對不是在說你
下一篇
Vue一下 11日:跟 Bon Jovi It's My Life沒什麼關係的 keep-alive
系列文
log Vue 一下30

尚未有邦友留言

立即登入留言