Vue.jsでイベントやウオッチャ（watchオプション）を学ぶ。

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

イベントが発生したとき、ブラウザは、イベントオブジェクトという特別なオブジェクトを生成してイベントハンドラの引数で渡してくれます。

Vueでは＄eventという変数名でイベントオブジェクトを受け取ります。

HTML

<div id=”app”>
<p class=”color”>マウスカーソルの位置：{{point.x}},{{point.y}}</p>
</div>

CSS

.color {
color: red;
}

JavaScript

var app = new Vue({
el: ‘#app’,
data: {
point: {x:0 , y:0}
},
created: function(){
// イベントハンドラを登録
addEventListener(‘mousemove’, this.mousemoveHandler);
},
beforeDestroy: function(){
// イベントハンドラを解除
removeEventListener(‘mousemove’,this.mousemoveHandler);
},
methods : {
// mousemoveイベントハンドラ
mousemoveHandler: function($event){
this.point.x = $event.clientX;
this.point.y = $event.clientY;
}
}
});

　ウォッチャの登録（watchオプション）

ウオッチャとは、データーの変換を監視してくれる機能です。監視したいデーターと、データーが変更されたときに実行したいハンドラをあらかじめ登録しておけば、VUeが自動的にデーターの変換を検知してハンドラを呼び出してくれる。イベントハンドリングと似ていますが、ハンドラが呼び出されるタイミングがイベントではなくデーターの変更である点が異なります。

書式： watch:{監視したいプロパティ名　：　関数オブジェクト}

watchオプションを使うことによって、在庫が０になったときmessageの内容が自動的に更新されるので、テンプレート側にmessageを表示するかどうかの条件分岐を記述する必要がなくなり、HTMLが少しすっきりできる。

HTML

<div id=”app2″>
<template v-if=”stock” >
<span class=”yellow”>残り{{stock}}</span>
<button v-on:click=”onDeleteItem”>削除</button>
</template>
{{message}}
</div>

CSS

.yellow {
background: linear-gradient(transparent 65%, yellow 65%);
}

JavaScript

var app2 = new Vue({
el:’#app2′,
data: {
message:”,
stock: 10
},
methods: {
onDeleteItem: function(){
this.stock–;
}
},
watch: {
stock: function(newStock, oldStock){
if(newStock === 0 ){
this.message = ‘売り切れ’;
}
}
}
});

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