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);
    }
  }
});

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

.stop event.stopPropagation()
.prevent event.preventDefault()
.capture 子孫要素のイベント時に先に実行できる。
.self event.targetが要素自身のときだけ実行され、子孫要素のイベント時には実行されない。
.once 最大1度だけ実行される。

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

<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>

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31