Vue.jsでイベントを設定する

Vue.jsのイベントハンドリングについて色々と試してみます。

サンプルコード

v-onでイベントの設定ができます。

<div id="app">
  <p>{{ counter }}</p>
  <button v-on:click="count">Add 1</button>
</div>

methodsでイベントの処理内容を設定します。

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    count: function() {
      this.counter += 1;
    }
  }
});

v-onのデモページ

v-on:を@に置き換えて記述を省略することもできます。

<div id="app">
  <p>{{ counter }}</p>
  <button @click="count">Add 1</button>
</div>

v-onの省略のデモページ

イベントのメソッドに引数の設定もできます。

<div id="app">
  <button v-on:click="message('message1')">message1</button>
  <button v-on:click="message('message2')">message2</button>
</div>

引数の内容をalertで表示するようにしてみます。

var app = new Vue({
  el: '#app',
  methods: {
    message: function(text) {
      alert(text);
    }
  }
});

引数設定のデモページ

メソッドにDOMイベントを渡す場合、$event変数を使います。

<div id="app">
  <button v-on:click="message('message1', $event)">message1</button>
</div>

$eventの内容をconsoleに表示するようにしてみます。

var app = new Vue({
  el: '#app',
  methods: {
    message: function(text, event) {
      console.log(event);
      alert(text);
    }
  }
});

DOMイベントを使用するデモページ

イベントの制御ができるイベント修飾子もいくつか用意されています。
イベントの後にドットで繋げて記述します。

<div id="app">
  <div v-on:click="message('click')">
    <a href="#" v-on:click.stop="message('stop')">stop</a>
  </div>
  <a href="#" v-on:click.prevent="message('prevent')">prevent</a>
  <a href="#" v-on:click.prevent>修飾子のみ</a>
  <div v-on:click.capture="message('capture')">
    <a href="#" v-on:click="message('子要素')">capture</a>
  </div>
  <div v-on:click.self="message('self')">
    <a href="#" v-on:click="message('子要素')">self</a>
  </div>
  <a href="#" v-on:click.once="message('once')">once</a>
</div>

JavaScriptは前出のコードと同じです。

var app = new Vue({
  el: '#app',
  methods: {
    greet: function(message) {
      alert(message);
    }
  }
});

イベント修飾子のデモページ

キー操作時に使用できるキー修飾子も用意されています。

<div id="app">
  <input v-on:keyup.a="message('a')" placeholder="a">
  <input v-on:keyup.enter="message('enter')" placeholder="enter">
  <input v-on:keydown.tab="message('tab')" placeholder="tab">
  <input v-on:keyup.delete="message('delete')" placeholder="delete">
  <input v-on:keyup.esc="message('esc')" placeholder="esc">
  <input v-on:keyup.space="message('space')" placeholder="space">
  <input v-on:keyup.up="message('up')" placeholder="up">
  <input v-on:keyup.down="message('down')" placeholder="down">
  <input v-on:keyup.left="message('left')" placeholder="left">
  <input v-on:keyup.right="message('right')" placeholder="right">
  <input v-on:keydown.ctrl="message('ctrl')" placeholder="ctrl">
  <input v-on:keydown.alt="message('alt')" placeholder="alt">
  <input v-on:keydown.shift="message('shift')" placeholder="shift">
  <input v-on:keydown.meta="message('ウィンドウキー or コマンドキー')" placeholder="meta">
</div>

基本的には指定している内容通りですが、例えば.enterの場合はエンターキーを押したときに実行されます。
キー修飾子のデモページ

マウスボタン操作時の修飾子もあります。

<div id="app">
  <button v-on:click.left="message('left')">左クリック</button>
  <button v-on:click.right="message('right')">右クリック</button>
  <button v-on:click.middle="message('middle')">ホイールクリック</button>
</div>

マウスボタンの修飾子のデモページ