Vue.jsのイベント回りをちょっと細かめに触る機会がありました。
ガイドを読んで学んだことをまとめます。

ドキュメント

Vue.js > ガイド > イベントハンドリング
https://jp.vuejs.org/v2/guide/events.html

環境

  • Vue.js 2.2.x
  • npm 4.0.x
  • node.js 7.0.x

v-on

イベントをバインドするにはv-onディレクティブです。

<button v-on:click="[ 何か処理 ]">

v-onは@と省略することができます。 次のコードは先のものと等価です。

<button @click="[ 何か処理 ]">

Vue.jsを触っているとやたらと@を目にします。
慣れるまでv-onに脳内変換するのが大変です。

イベントの実行

v-on属性の値にJavaScript式を書くことができます。

<button @click="counter + 1">

関数名を指定することも可能です。

<button @click="countUp">

関数に引数を与えることも可能です。

<button @click="countUp(2)">

上記の表現だけで、実にいろいろなことができます。
この辺りが整理できると、無駄のない簡潔なコードを書くことができると思います。

こういった使い方もできるという例を示します。

クリックしたボタンの詳細を表示する

<div v-for="item in items">
  <button @click="detail = item">
</div>

<div id="detail" v-if="detail != null">
  {{ detail.name }}
  <!-- 素晴らしい実装 -->
</div>

子コンポーネントから親コンポーネント$emitを飛ばす

<button @close="$emit('close')">

いやー、無駄がないですね。 美しい、、、

修飾子

v-onには大変便利な修飾子がいくつも実装されています。

例によってドキュメントから引用いたします。

<!-- クリックイベントの伝搬が止まります -->
<a v-on:click.stop="doThis"></a>
<!-- submit イベントによってページがリロードされません -->
<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>
<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
<!-- 言い換えると子要素のときは呼び出されません -->
<div v-on:click.self="doThat">...</div>

上のコードは次より引用
https://jp.vuejs.org/v2/guide/events.html#イベント修飾子


5年前には「 とりあえずデフォルト動作とバブリングは禁止しておけばOK! 」と、ことあるごとに次のコードを書いてしまっていました。

$('#hoge').click(function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Vue.jsでは修飾子で処理できるので、意図が明確ですし、記法も簡潔ですねー。

<button @click.stop.prevent>

キー修飾子

Vue.jsではキーイベントで使いやすいエイリアスが用意されています。

  • enter
  • tab
  • delete (“Delete” と “Backspace” キー両方をキャプチャします)
  • esc
  • space
  • up
  • down
  • left
  • right

次より引用
https://jp.vuejs.org/v2/guide/events.html#キー修飾子

5年前はこんな関数を実装し、キーコードごとに処理分けをしていました。
キーコードを調べなくてはなりませんし、直感的ではありません。

var keyDown = function(e) {
  if (e.keyCode == 9  /* tab   */) {
    // 何か処理
  }
  if (e.keyCode == 13 /* enter */) {
    // 何か処理
  }
  // あれ、キーコードはあってる?
  if (e.keyCode == 37 /* up */) {
    // 何か処理
  }
  : // 延々と続く
};

Vueでは、一部キーを修飾子でフォローしております。
極端ですが、次のようにキーイベントを並べることもできます。

<div
  @keydown.enter="keyEnter"
  @keydown.tab="keyTag"
  @keydown.up="keyArrow(-3)"
  @keydown.down="keyArrow(3)"
  @keydown.left="keyArrow(-1)"
  @keydown.right="keyArrow(1)"
>

コードを覚えたり調べたりする必要がないというのは、大変素晴らしいです。


上の例のようにやたらとキーイベントを並べたりすると、それだけイベントリスナが登録されてしまうのかどうか。

そこは調べきれていないため、もしご存知の方は教えてくださると助かります。

その他の修飾子

修飾子 説明 バージョン
.ctrl Controlキーに対応 2.1.0
.alt Altキーに対応 2.1.0
.shift Shiftキーに対応 2.1.0
.meta Mac: コマンドキー(⌘) Win: ウィンドウキー(⊞) 2.1.0
.left マウス左ボタンに対応 2.2.0
.right マウス右ボタンに対応 2.2.0
.middle マウス中ボタンに対応 2.2.0

次より引用
https://jp.vuejs.org/v2/guide/events.html#修飾子キー
https://jp.vuejs.org/v2/guide/events.html#マウスボタンの修飾子

おわりに

Vue.jsでイベントを購読するには v-onディレクティブ であると、これだけ知っていればとりあえず使えます。
これに加えて便利な修飾子を知るともっと簡単な実装でイベントを実装できますよ、という内容でした。

楽しい開発ライフをお過ごしください。

この記事はtomita@atuwebがお届けしました。