【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をはじめたときにこの本で勉強しました。

コメント

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