【Vue.js 】イベントハンドリング（v-onディレクティブ）

イベントハンドリングとは

ボタンをクリックしたり、マウスオーバーやスクロールなどユーザーによる一連の挙動を「イベント」と呼ぶ。様々なイベントに対応して発動させる処理のことを「イベントハンドラ」と呼び、イベントハンドラをイベントと紐づけることを「ハンドル」という。

vueにおいてのイベントハンドラ

vueでイベントによってイベントハンドラを実行させるにはv-onディレクティブを用いる。

基本構文

<button v-on:イベント名="処理(関数)">add</button>

<button v-on:click="counter += 1">add</button>

省略記法

<div @イベント名="処理(関数)"></div>

sample.html

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>上のボタンがクリックされた回数{{ counter }} 回</p>
</div>

sample.js

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

ボタンをクリックすることでイベントハンドラが実行され、counterの数字が＋1されていく。

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

ここではv-on属性の値に直接javascriptの式を記述している。このような記述法をインラインメソッドハンドラという。

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

イベントハンドラの仕組みはより複雑になっていくので式ではなく、メソッドの名前に置き換えることで、すっきりとしたコードが記述できる。そのような記述方法をメソッドイベントハンドラという。

sample.html

<div id="app">
  <!-- クリックすることでshowMessageメソッドが呼び出される -->
  <button v-on:click="showMessage">ボタン</button>
　<!-- 「こんにちわ」と表示される -->
  <p>{{ msg }}</p>
</div>

sample.js

new Vue({
  el: '#app',
  data: function () {
    return {
      msg: ""
    };
  },
  methods: {
    // msgに「こんにちわ」が代入される
    showMessage: function () {
      this.msg = 'こんにちわ'
    }
  }
});

イベント一覧

記述	イベントハンドラ実行タイミング
@click	クリック時
@focus	フォーカス時
@blur	フォーカスが外れた時
@change	input変更時
@dblclick	ダブルクリック時
@submit	サブミット時
@keyup	キーアップ時
@keydown	キーダウン時
@mouseover	カーソルを当てた時(hoverと同じ)
@mouseout	カーソルを外した時
@mouseenter	カーソルを当てた時(子要素に反応させない)
@mouseleave	カーソルを外した時(子要素に反応させない)
@mousedown	マウスでクリックした時
@mouseup	クリックしたマウスを上げた時
@mousemove	マウス動かしてる時
@touchstart	スマホとかでタッチした時
@touchmove	タッチ状態から動かした時
@touchend	指を離した時

イベント修飾子

v-onディレクティブのイベントに対する制御をより細かく指定することのできる機能の総称をイベント修飾子という。通常のHTMLでは同じイベントをハンドルしたDOMがネストしている場合、バブリングといって子要素から外側（親要素方向）に向かって順にイベントが連鎖していく。イベント修飾子を付与することでそのバブリングを制御することができる。

基本構文.html

<button v-on:click.イベント修飾子="alert">add</button>

<!-- 修飾子は繋げることもできる -->
<button v-on:click.stop.prevent="alert">add</button>

イベント修飾子一覧

記述	機能
.stop	イベントの連鎖を止める
.prevent	イベントの規定の動作をキャンセル
.capture	子要素のイベント実行時に親要素のイベントを先に実行
.self	子要素から親要素のイベントが発生しなくなる
.once	イベントを一回だけ実行
.passive	.preventの影響を無視

キー修飾子

特定のキーコードのキー入力時に、特定のイベントハンドラを呼び出す。

基本構文.html

<input type="text" v-on:keydown.キー修飾子="alert">

<!-- 複数つけた場合は「OR」を意味する -->
<input type="text" v-on:keydown.up.down.left.right="alert">

キー修飾子一覧

記述	機能
.enter	enterが押されたとき
.tab	tabが押されたとき
.delete	deleteが押されたとき
.esc	escが押されたとき
.space	spaceが押されたとき
.up	矢印の上キーが押されたとき
.down	矢印の下キーが押されたとき
.left	矢印の左キーが押されたとき
.right	矢印の右キーが押されたとき

システム修飾子

対応するキーが押されている場合にハンドラが呼び出される。

基本構文.html

<!-- shiftキーを押しながらクリックしたとき -->
<button v-on:click.shift="doDelete">削除ボタン</button>

システム修飾子一覧

記述	機能
.ctrl	ctrlが押されている場合
.alt	altが押されている場合
.shift	shiftが押されている場合
.meta	metaが押されている場合