今回は、Vue コンポーネントが持つオプションの中の一つである watch オプションを紹介します。

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

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...
ウォッチャとは
ウォッチャとは、データの変更を監視する機能です。
監視したいデータと、そのデータが変更されたときに実行したい処理を登録しておくことで、自動的に変更を検知して処理を実行してくれます。
イベントハンドリングと似ていますが、異なる点は、ある処理が呼び出されるタイミングがイベントではなくデータの変更であることです。
ウォッチャの使い方
watch: { 監視したいプロパティ名: 関数オブジェクト }
ウォッチャに登録した関数オブジェクトは、第一引数に変化後の値を、第二引数に変化前の値を受け取ることができます。
サンプルでは、ボタンを押すごとに戦闘力が上昇し、その増加分を表示するプログラムを見てみます。
(ドラゴンボールネタです…(´ー`))
<div id="app">
<template v-if="power <= 22000">
<span>戦闘力:{{power}}</span>
<button v-on:click="powerUp">上昇</button>
<p>{{message}}</p>
</template>
<template v-else>
スカウターが壊れました。
</template>
</div>
var app = new Vue({
el: '#app',
data: {
power: 13000,
click: 0,
message: ''
},
methods: {
powerUp: function() {
this.power += this.click * 300 + 1000;
this.click += 1;
}
},
watch: {
power: function(afterPower, beforePower) {
this.message = '戦闘力が' + (afterPower - beforePower) + '上昇しました。';
}
}
});
今回は戦闘力の増加分に変化をつけるため、ボタンのクリック回数によって変わるようにしました。
power プロパティ値の変化を監視するためにwacth オプションに登録し、その関数オブジェクトは変化後と変化前の power プロパティ値を引数としています。
(変化後の戦闘力 - 変化前の戦闘力)とすることで増加分を求めています。

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

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...
コメント