ボタンをクリックしたときや、マウスカーソルが要素の上に乗った時など、主にユーザーの操作をきっかけに発生する出来事をイベントと呼び、イベントを検知して何らかの処理を行うものをイベントハンドラと呼びます。
JavaScript を習得している方には、addEventListener でイベントハンドラを登録するのがおなじみですね!
今回はその Vue.js 版を紹介します。
Vue.js の書き方を最初から知りたいという方はこちら(^^)
参考書

イベントハンドラの登録
イベント名には JavaScript に用意されているイベントを入れます。
( click, scroll, mouseover など)
イベントハンドラは methods オプションに関数オブジェクトとして定義します。
サンプルとして、クリックイベントの使用例を見てみます。
<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で策定されたタグであり、このタグ自身はブラウザに出力されません。
「上昇」ボタンをクリックする度に戦闘力が1000ずつ上がり、22000を超えるとスカウターが壊れます。


イベントハンドラが受け取る引数
イベントが発生したとき、$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 プロパティでこの要素内におけるマウスカーソルの座標を取得することができます。

今回は以上になります。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書

コメント