2018年8月4日 星期六

[Vue.js] 事件控制

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



直接執行或是事件觸發時再執行的寫法



帶入變數



這邊可以調整事件的預設行為

.stop
.prevent
.capture
.self
.once
.passive

  1. <!-- the click event's propagation will be stopped -->  
  2. <a v-on:click.stop="doThis"></a>  
  3.   
  4. <!-- the submit event will no longer reload the page -->  
  5. <form v-on:submit.prevent="onSubmit"></form>  
  6.   
  7. <!-- modifiers can be chained -->  
  8. <a v-on:click.stop.prevent="doThat"></a>  
  9.   
  10. <!-- just the modifier -->  
  11. <form v-on:submit.prevent></form>  
  12.   
  13. <!-- use capture mode when adding the event listener -->  
  14. <!-- i.e. an event targeting an inner element is handled here before being handled by that element -->  
  15. <div v-on:click.capture="doThis">...</div>  
  16.   
  17. <!-- only trigger handler if event.target is the element itself -->  
  18. <!-- i.e. not from a child element -->  
  19. <div v-on:click.self="doThat">...</div>  



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



若覺得記 keycode 麻煩,也可以用這種寫法
  1. <!-- same as above -->  
  2. <input v-on:keyup.enter="submit">  
  3.   
  4. <!-- also works for shorthand -->  
  5. <input @keyup.enter="submit">  

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

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


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...