【Vue.js】watchプロパティ

Vue.jsを使っているとデータの変更だったり監視して処理したい場合があると思います。

Vue.jsには、あらかじめデータやプロパティの変更を検知するためのwatchプロパティ(監視プロパティ)が用意されています。

それではwatchプロパティについての書き方について紹介していきます。

Vueのwatchプロパティ

Vueのwatchプロパティの書き方

wetch: {
	プロパティ名: function() {
	// プロパティの中身が変更された時の処理
	}
}

watchプロパティを使ってみよう

html

<div id="app"></div>

vue

<script>
new Vue({
    el: '#app',
    data: {
        msg: 'メッセージテキスト',
    },
    methods: {
      active: function () {
        this.msg = 'メッセージを変更しました';
      }
    },
    watch: {
      msg: function() {
        alert('メッセージが変更されました');
      }
    },
    template: `
        <div>
          <h1>{{ msg }}</h1>
          <button @click="active">ボタン</button>
        </div>
      `
})
</script>

上記の例ではクリックしたときにテキストの変更を行っています。

テキストが変更されたときにwetchプロパティでアラートが出る処理になります。

サンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。