Event Handling

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 代碼。

v-on

當 button Greet被點擊的時候，會執行 method greet，也可利用 event.target 得到被點擊的目標。

官方範例：

<button v-on:click="greet">Greet</button>

data: {
  name: 'Vue.js'
},
methods: {
  greet: function (event) {
    alert('Hello ' + this.name + '!')
    if (event) {
      alert(event.target.tagName);
    }
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/yva2or3m/2/

另外除了直接綁定 method 名稱外，也可以綁定一個 inline javascript statement，也就是說可以帶入參數。

例如下面的範例，在 say 這個 method 傳入 一個 string 為 hi 或是傳入msg這個 data，並且跳出警告訊息。

<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say(msg)">Say what</button>

data: {
  msg: 'what'
},
methods: {
  say: function (message) {
    alert(message)
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/ayupapvh/

Event Modifiers(事件修飾符)

Vue.js 提供許多後綴修飾符例如(這邊以 v-on:click 為例)：

@click.prevent

後綴修飾符.prevent可防止瀏覽器預設行為。

此範例為點擊atag時，避免連結到 Vue.js 的官網(咦？是很討厭Vue嗎XD)。

<a href="https://vuejs.org/" @click.prevent="preventDefault">button</a>

methods: {
  preventDefault: function() {
    alert('不會連結到 Vue.js官網');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/pq60qpna/1/

@click.stop

後綴修飾符.stop可阻止點擊事件往父層傳播。

此範例若將.stop後綴修飾符移除，則 method parent 也會觸發。

<div @click="parent">
  <button @click.stop="child">button</button>
</div>

methods: {
  parent: function() {
    alert('這是父層的 div');
  },
  child: function() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/3b4zxf99/3/

@click.capture

後綴修飾符.capture可將事件的傳遞改由父層往子層傳遞。

我簡單改寫上面的範例，即可發現點擊時先觸發了parent再來才是child。

<div @click.capture="parent">
  <button @click.capture="child">button</button>
</div>

methods: {
  parent: function() {
    alert('這是父層的 div');
  },
  child: function() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/6e1ucvav/

@click.self

後綴修飾符.self僅僅觸發自己範圍的事件，不包含子層。

一樣改寫上面範例，這邊新增了一個middlemethod，並在parent的div添加.self修飾符。

當點擊button時，僅觸發了child和middle，原因是.self修飾符觸發的條件需為event.target 為自身時，而此處的event.target為button。

<div @click.self="parent">
  <div @click="middle">
    <button @click="child">button</button>
  </div>
</div>

methods: {
  parent() {
    alert('這是父層的 div');
  },
  middle() {
    alert('這是中間的 div，而且只有我被觸發');
  },
  child() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/gvtwgLpf/

@click.once

後綴修飾符.once僅在按下第一次時被執行。

<button @click.once="runOneTime">button</button>

methods: {
  runOneTime: function() {
    alert('我只跑一次');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/ovjLLamx/

key modifiers(按鍵修飾符)

略。

參考資料

• Summer: Vue.js: Methods 與事件處理 (Event Handling)
• Vue.js: Event Handling