【Vue.js 入門】ユーザーの操作を検知する「イベントハンドリング」

ボタンをクリックしたときや、マウスカーソルが要素の上に乗った時など、主にユーザーの操作をきっかけに発生する出来事をイベントと呼び、イベントを検知して何らかの処理を行うものをイベントハンドラと呼びます。

JavaScript を習得している方には、addEventListener でイベントハンドラを登録するのがおなじみですね！
今回はその Vue.js 版を紹介します。

Vue.js の書き方を最初から知りたいという方はこちら(^^)

参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ！！

Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです！Vue.jsのツボとコツがゼッタイにわかる本...

イベントハンドラの登録
イベントハンドラが受け取る引数

イベントハンドラの登録

<要素名　v-on: イベント名 = ” ハンドラ名 ” >

イベント名には JavaScript に用意されているイベントを入れます。
（ click, scroll, mouseover など）

イベントハンドラは methods オプションに関数オブジェクトとして定義します。

method: { ハンドラ名 :　関数オブジェクト }

サンプルとして、クリックイベントの使用例を見てみます。

<div id="app">
  <template v-if="power <= 22000">
    <span>バカな…戦闘力{{power}}だと…！？</span>
    <button v-on:click="powerUp">上昇</button>
  </template>
  <template v-else>
    スカウターが壊れました。
  </template>
</div>

var app = new Vue({
  el: '#app',
  data: {
    power: 18000
  },
  methods: {
    powerUp: function() {
      this.power += 1000;
    }
  }
});

<template>タグはテンプレートを作るためにHTML5で策定されたタグであり、このタグ自身はブラウザに出力されません。

「上昇」ボタンをクリックする度に戦闘力が１０００ずつ上がり、２２０００を超えるとスカウターが壊れます。

イベントハンドラが受け取る引数

イベントが発生したとき、$event という変数名でイベントオブジェクトを受け取ります。
イベントオブジェクトには、そのイベントに関する様々な情報が格納されています。

サンプルでは、要素内におけるマウスカーソルの座標を取得して表示する例を見てみます。

<div id="app">
  <p>マウスカーソルの位置：{{point.x}}, {{point.y}}</p>
  <div class="box" v-on:mousemove="mousemoveHandler"></div>
</div>

.box{
  width: 100vw;
  height: 100vh;
  background: #ddd;
}

var app = new Vue({
  el: '#app',
  data: {
    point: { x: 0, y: 0 }
  },
  methods: {
    mousemoveHandler: function($event) {
      this.point.x = $event.offsetX;
      this.point.y = $event.offsetY;
    }
  }
});

要素の上でマウスカーソルが動かされるたびにイベントハンドラが実行されます。

このサンプルの $event にはイベントが発生した要素に関する情報が入っているため、
offsetX, offsetY プロパティでこの要素内におけるマウスカーソルの座標を取得することができます。