【Vue.js 入門】watch オプションの使い方

Vue.js

今回は、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のツボとコツがゼッタイにわかる本...

コメント

コンタクトフォーム

    タイトルとURLをコピーしました