基礎からメモ： Vue.js CH3-p96 イベントハンドリング

Vue.js

v-onディレクティブ

Vue.js でDOMイベントを受け取るには、v-onディレクティブを使う。

<button v-on:click="イベントハンドラ">クリック</button>

イベントハンドラには、コンポーネントのmethodsオプションで定義したメソッド名を指定する。

<button v-on:click="handleClick">クリック</button>

v-onは省略形で@と書くことができる。

<button @click="handleClick">クリック</button>

例：ボタンクリックするとhandleClickメソッドを呼び出す。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  methods: {
    handleClick: function() {
      alert(this.message);
    }
  }
})

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

v-onの値にはJavaScriptの式を直接書ける。短い式なら、このインラインメソッドハンドラで対応できる。

<button v-on:click="count++">クリック</button>

$event

元のイベントオブジェクトは$eventという変数名で渡すことができる。 例：イベントオブジェクトとスコープ内のitemプロパティをhandleClickメソッドに渡す。

<button v-on:click="handleClick($event, item)">クリック</button>

使用可能なイベント

ブラウザがサポートしているDOMイベントは全て使える。

例： 要素のスクロールイベントをハンドル

<div v-on:scroll="handler">コンテンツ</div>

例： マウスのホイールイベントをハンドル

<div v-on:mousewheel="handler">コンテンツ</div>

例： app.show,app.isActiveがともにtrueな場合、"item1.png"という画像が表示され、imgタグにはactiveクラスが付く。

<img src="item1.png" v-on:load="show=true" v-bind:class="{hide: !show, active: isActive}">

これを利用してボタンクリックで画像をゆっくり表示したり消したりする例

<div id="app">
    <button v-on:click="handleClick">クリック</button>
    <img src="item1.png" v-on:load="show=true" v-bind:class="{hide: !show, active: isActive}">
</div>

var app = new Vue({
  el: '#app',
  data: {
    show: true,
    isActive: true,
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
      this.isActive = !this.isActive;
    }
  }
})

ゆっくり表示・非表示させるためのスタイルも定義しておく。

img {
  opacity: 1;
  transition: opacity 1s;
}
img.hide {
  opacity: 0;
}

クリックして画像が消えると、imgタグのクラスはactiveからhideに変わる。

v-onでフォーム入力の取得

フォームの入力値の取得には基本v-modelを使うが、v-onで入力内容の確認後にデータ代入するなどのフック処理ができる。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  methods: {
    handleInput: function(event) {
      // 代入値のチェックなど何らか処理を行う...
      this.message = event.target.value
    }
  }
})

  • Vue.js でDOMイベントを受け取るには、v-onディレクティブを使う。
  • v-onの値にはJavaScriptの式を直接書ける。
  • 元のイベントオブジェクトは$eventという変数名で渡すことができる。
  • ブラウザがサポートしているDOMイベントならば全て使える。
  • v-onでフォーム入力値に対するフック処理ができる。