Vue.jsでのイベントハンドリングについて説明しています。

イベントとはボタンやリンクをクリックしたり、マウスのホイールを動かしてページをスクロールさせたり、主にユーザーの操作をきっかけとしてブラウザの中で発生する出来事のこと。

「クリックイベント 」

削除ボタンをクリックするたびに在庫数が１ずつ減って、在庫が０にあると表示が「在庫切れ」に変わる。

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

書式：methods:{ハンドラ名：関数オブジェクト｝

HTML

<div id=”app”>
<template v-if=”stock” >
<span class=”red”>残り{{stock}}個</span>
<button v-on:click=”onDeleteItem”>削除</button>
</template>
<template v-else>在庫切れ</template>
</div>

JavaScript

var app = new Vue({
el: ‘#app’,
data: {
stock: 10
},
methods : {
onDeleteItem: function(){
this.stock–;
}
}
});

「コンポーネントの外側のイベントハンドリング 」

v-onディレクティブでイベントハンドラを登録できるのは、elオプションに指定したコンポーネントのスコープ内にある要素に限られる。つまり＜div id=”app”＞＜/div＞の外側にある要素や、ウインドウ自体に発生するイベントはv-onで検知出来ない。

ページが読み込まれたときに発生するloadイベント、ウインドウサイズが変わったときに発生するresizeイベント、ページをスクロールさせたときに発生するscrollイベントなどが該当する。

今回はresizeイベントを使いました。ウインドウの幅や高さを変えて左上の「更新ボタン（マル矢印）」を押してみましょう。

HTML

<div id=”app2″>
ウインドウの横幅：{{width}}
ウインドウの高さ：{{height}}
</div>

JavaScript

var app2 = new Vue({
el:’#app2′,
data: {
width: window.innerWidth,
height:window.innerHeight
},
created: function(){
// イベントハンドラを登録
　　　addEventListener(‘resize’,this.resizeHandler);
},
beforeDestroy: function(){
// イベントハンドラを解除
removeEventListener(‘resize’,this.resizeHandler);
},
methods: {
// イベントハンドラ
resizeHandler: function($event){
// 現在のウインドウサイズでプロパティを更新
this.width = $event.target.innerWidth;
this.height = $event.target.innerHeight;
}
}
});

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

イベントが発生したとき、ブラウザはイベントオブジェクトという特別なオブジェクトを生成してイベントハンドラの引数で渡してくれます。イベントオブジェクトの中には、イベントが発生したDOMノードそのものを表すtargetオブジェクトや、そのイベントに関する様々な情報が格納されています。

Vueでは$eventという変数名でイベントオブジェクトを受け取ります。resizeイベントの発生元はwindowオブジェクトなので、targetにはwindowオブジェクトが代入されています。そのため、windowオブジェクトが持っているinnerWidthやinnerHeightといったプロパティをtargetから引き出すことができます。

わからないことはプロフェッショナルから学ぶのが一番