基礎からメモ： Vue.js CH2-p53 リアクティブなデータ

Vue.js のキモはリアクティブデータ

Vueインスタンスのdataには、文字列、配列、オブジェクトなどを登録できる。

[main01.js]

let state = { count: 0 };

var app = new Vue({
  el: '#app',
  data: {
    value: {
      message: "Hello Vue.js!",
      num: 0
    },
    state: state
  },
  methods: {
    handleClick: function(event){
      state.count++;
    }
  }
})

また、上のstateのようにインスタンス定義の外（定義の前）で定義されたデータも、Vueデータとして取り込むことができる。

[index01.html]

  <div id="app">
   <p>Message: {{ value.message }}</p>
    <p><input v-model="value.message"></p>
    <p>Number: {{ value.num }}</p>
    <p>Count: {{ state.count}}</p>
    <button v-on:click="handleClick">Count+!</button>
  </div>

このHTMLのボタンはVueインスタンスのhandleClickメソッドを呼び出すので、クリックするたびにstate.countが1ずつ増加する。

またコンソールからapp.value.num++とかapp.state.count++とかすれば、それぞれの数値が変化する。

なおdataオプションのプロパティは後から追加できない。あらかじめプロパティ名を決めて初期値や空データを代入しておく必要がある。

• Vueインスタンスのdataには、文字列、配列、オブジェクトなどを登録できて、リアクティブデータとなる。
• インスタンス外（定義前）で定義されたデータも、Vueデータとして取り込むことができる。
• dataオプションのプロパティは後から追加できない。プロパティ名を決めて初期値や空データを代入しておく必要がある。