Vue.js イベントハンドリング

イベント監視では、v-onディレクティブを使用できます。

<div id="app">
  <button v-on:click="counter += 1">増加 1</button>
  <p>このボタンは {{ counter }}回にクリックされた。</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

通常、JavaScriptメソッドを呼び出すにはメソッドを使用する必要があります。

v-onは定義されたメソッドを受け取って、呼び出します。

<div id="app">
   <!-- `greet` は下記にある定義されたメソッド名である -->
  <button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // `methods`オブジェクトでメソッドを定義する
  methods: {
    greet: function (event) {
      //`this`はメソッド内に現在のVueインスタンスを表示する
      alert('Hello ' + this.name + '!')
      //`event`はDOMイベントである
	  if (event) {
		  alert(event.target.tagName)
	  }
    }
  }
})
// JavaScriptを使用してメソッドを直接呼び出すこともできる
app.greet() // -> 'Hello Vue.js!'
</script>

メソッドに直接バインドするだけでなく、インラインJavaScriptステートメントを使用することもできます。

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

イベント修飾子

Vue.jsは、event.preventDefault()やevent.stopPropagation()などのDOMイベントの詳細を処理するため、v-onのイベント修飾子を提供します。

Vue.jsはドット“.”によって表示されたコマンド拡張子で修飾子を呼び出します。

• .stop – イベントの伝搬をやめる
• .prevent -デフォルトのイベントをブロックする
• .capture -キャプチャを防ぐ
• .self -要素をトリガするイベントのみをリッスンする
• .once -1回だけトリガする
• .left -左キーイベント
• .right -右キーイベント
• .middle -マウスホイールイベント

<!--クリックイベントの伝搬が止まる -->
<a v-on:click.stop="doThis"></a>
<!-- イベントによってページがリロードされない -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾子は繋げることができる  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 値を指定せず、修飾子だけ利用することもできる -->
<form v-on:submit.prevent></form>
<!-- イベントリスナーを追加するときにキャプチャモードで使う -->
<div v-on:click.capture="doThis">...</div>
<!--イベントが要素自身(子要素ではない)のときだけ、ハンドラが呼び出される -->
<div v-on:click.self="doThat">...</div>
<!-- 最大1回、クリックイベントはトリガされる，2.1.4バージョン新規追加 -->
<a v-on:click.once="doThis"></a>

キー修飾子

Vueを使用すると、v-onはキーイベントをリッスンするときにキー修飾子を追加できます。

<!-- keyCodeが13の場合にのみvm.submit()を呼び出す -->
<input v-on:keyup.13="submit">

すべてのkeyCodeを覚えるのは難しいため、Vueは最も常用のキーに別名を提供します。

<!-- 上記と同様 -->
<input v-on:keyup.enter="submit">
<!-- 省略された構文 -->
<input @keyup.enter="submit">

すべてのキーの別名：

• .enter
• .tab
• .delete (“削除”キーと“バックスペース”キーをキャプチャする)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

例

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>