イベントハンドラが受け取る引数 | Arguments received by the event handler

イベントが発生したとき、ブラウザは、イベントオブジェクトという特別なオブジェクトを生成してイベントハンドラの引数で渡してくれます。 | When an event occurs, the browser creates a special object called an event object and passes it as an argument to the event handler.

Vueでは＄eventという変数名でイベントオブジェクトを受け取ります。| Vue receives an event object with a variable name of $ 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 = '売り切れ';
}
}
}
});

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー