Vue.jsでイベントハンドリング入門

Vue.jsでイベントを発火させる方法を解説します。

Vue.jsでは、v-onディレクティブを使って、DOMイベントをリッスンし、

それがトリガーされたときにいくつかのJavaScriptを実行することができます。

例えば、以下のようになります。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div> 上記のようなHTMKコードがあった時、それを発火させるには下記のように書くことができます。

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

メソッドのイベントハンドラ

しかし、多くのイベントハンドラのロジックはより複雑になるため、

JavaScriptをv-on属性の値に保持することは現実的ではありません。

そのため、v-onには呼び出したいメソッドの名前を指定することができます。

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

これがHTMLになりまして、下記がVue.jsの実装です。

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

インラインハンドラーのメソッド

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

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

インライン・ステートメント・ハンドラで元の DOM イベントにアクセスする必要がある場合もあります。

そのような場合は、特別な $event 変数を使用してメソッドに渡すことができます。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

イベントモディファイア

イベントハンドラの中で event.preventDefault() や event.stopPropagation() を呼び出したいというニーズは非常によくあります。メソッドの中で簡単にこれを行うことができますが、DOMイベントの詳細を扱うのではなく、メソッドが純粋にデータ・ロジックを扱うことができれば、より良いでしょう。

この問題を解決するために、Vueはv-on用のイベント修飾子を提供しています。修飾子は、ドットで示されるディレクティブの接頭辞であることを思い出してください。

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

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

修飾子を使用する場合、関連するコードが同じ順序で生成されるため、順序は重要です。したがって、v-on:click.prevent.selfを使用すると、すべてのクリックを防ぐことができますが、v-on:click.self.preventを使用すると、要素自体へのクリックのみを防ぐことができます。

キーモディファイア

キーボードのイベントをリッスンするとき、特定のキーをチェックする必要があることがよくあります。

Vueでは、キーイベントをリッスンする際に、v-on用のキーモディファイアを追加することができます。

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

KeyboardEvent.keyで公開されている有効なキー名をkebab-caseに変換することで、モディファイアとして直接使用することができます。

<input v-on:keyup.page-down="onPageDown">

上の例では、$event.keyが’PageDown’と等しい場合にのみ、ハンドラが呼び出されます。

システムモディファイアキー

以下の修飾子を使うと、対応する修飾キーが押されたときにのみ、マウスやキーボードのイベントリスナーを起動することができます。

• .ctrl
• .alt
• .shift
• .meta

注：Macintoshのキーボードでは、metaはコマンドキー(⌘)です。Windows キーボードでは、meta は Windows キー (⊞) です。Sun Microsystems のキーボードでは、meta はソリッドダイヤモンド (◆) として表示されます。特定のキーボード、特にMITやLispマシンのキーボードやその後継機、例えばKnightキーボードやスペースカデットキーボードでは、metaは “META “と表示されます。Symbolics社のキーボードでは、metaは “META “または “Meta “と表示されます。

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

修飾キーは通常のキーとは異なり、キーアップイベントで使用する場合は、イベントが発せられたときに押されていなければならないことに注意してください。つまり、keyup.ctrlはctrlを押しながらキーを離した場合にのみ発生します。ctrlキーを押しながらキーを離した場合にはトリガーされません。もし、このような動作をさせたい場合は、代わりにctrlのkeyCodeであるkeyup.17を使用してください。

.exact 修飾

.exact修飾子は、イベントを引き起こすのに必要なシステム修飾子の正確な組み合わせを制御することができます。

<!-- this will fire even if Alt or Shift is also pressed -->
<button v-on:click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button v-on:click.exact="onClick">A</button>

マウスボタンのモディファイア

• .left
• .right
• .middle

これらの修飾子は、特定のマウスボタンによって引き起こされるイベントにハンドラを制限します。

なぜHTMLでリスナーなのか？

このイベントリスニングのアプローチは、「関心事の分離」という古き良きルールに反するのではないかと懸念されるかもしれません。安心してください。すべての Vue ハンドラ関数と式は、現在のビューを処理している ViewModel に厳密にバインドされているので、メンテナンス上の問題は発生しません。実際、v-onを使うことでいくつかのメリットがあります。

• HTML テンプレートに目を通すことで、JS コード内のハンドラー関数の実装を簡単に見つけることができます。
• JS でイベント リスナーを手動でアタッチする必要がないため、ViewModel のコードはピュア ロジックで DOM フリーとなります。これにより、テストが容易になります。
• ViewModel が破棄されると、すべてのイベント リスナーが自動的に削除されます。自分で後始末をする必要はありません。