[Vue.js] 事件控制

標籤: Vue.js javascript

使用 v-on:click 可以設定點擊後執行的事件,以下為每次點擊都 +1

 

頁面讀取後執行或是處發事件後執行

 

帶入變數

 

以下可以調整事件的預設行為

.stop: 阻止氣泡事件
.prevent: 停止預設行為
.capture: 可將事件的傳遞改由父層往子層傳遞
.self: 後綴修飾符.self僅僅觸發自己範圍的事件,不包含子層。
.once: 僅在按下第一次時被執行。
.passive:

類似這樣寫法:
<a v-on:click.stop="doThis"></a> 

串聯使用:
<a v-on:click.stop.prevent="doThat"></a>

 

如果要綁定鍵盤事件,可以用 v-on:keyup 後面帶 keycode

 

若覺得記 keycode 麻煩,也可以用這種寫法

<input v-on:keyup.enter="submit"> 

<input @keyup.enter="submit">  

 

目前可以使用的鍵盤按鍵如下:

.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right