iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 7

07 Vue的模板語法 - v-on偵聽事件

使用v-on指令可以偵聽DOM 事件,並執行後續方法

下面例子在button上bind click事件,在click時改變資料(將原先定義好的counter + 1)

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

或直接綁定methods的function,改寫上面例子如下:

<div id="example-1">
  <button v-on:click="add">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

把原先的動作包成名叫add的function定義在methods項下,並在click時調用他

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  },
  methods:{
    add: function(){
      counter +=1;
    }
    //或寫這樣
    //add(){
    //  counter += 1;
    //}
  }
})

事件

DOM事件還有其他如:mouseover, mouseleave, keydown, keyup....等等。
詳細清單可以參考HTML DOM Event Object
一樣接在v-on後:

<button v-on:mouseover=""></button>
<button v-on:mouseleave=""></button>

縮寫

v-on也可以寫成@

<button v-on:click="add"></button> <!--完整-->
<button @click="add"></button>      <!--縮寫-->

縮寫-> @click

修飾符

Vue在事件、滑鼠與鍵盤監聽的處理上有提供修飾符,讓我們可以在做事件處理時能讓操作更加簡化,不用在function裡在去處理DOM事件細節。
以下如官方文件所列:

事件修飾符(Event Modifiers)

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

實際寫專案的時候常遇到click事件冒泡的問題,這時候都要在function內加上event.preventDefault();,用Vue的話直接@click.prevent就解決了,是不是很方便!

按鍵修飾符(Key Modifiers)

  • .enter
  • .tab
  • .delete( delete/backspace )
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

滑鼠按鈕修飾符(Mouse Button Modifiers)

  • .left
  • .right
  • .middle

以上v-on偵聽事件的學習,看官方文件還有好多細節,以後應該會慢慢碰到,下篇開始結合以上指令做一個小練習/images/emoticon/emoticon13.gif


上一篇
06 Vue的模板語法 - v-bind綁定class及style
下一篇
08 Vue的模板語法 - 事件動態切換class的小練習
系列文
從0開始vue.js的30天學習日誌30

1 則留言

0
khcho
iT邦新手 5 級 ‧ 2018-10-22 23:18:35

/images/emoticon/emoticon34.gif

UT iT邦新手 5 級 ‧ 2018-10-23 12:11:00 檢舉

/images/emoticon/emoticon28.gif

我要留言

立即登入留言