Vue -データバインディングとは -

データバインディングとは...？

• データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである → 一方を変更するともう一方を自動的に変更することだな。

Vueの基本的なデータバインディング

1/ v-bind

inde.html

 <div id="app">
    {{ message }}
  </div>

main.js

 new Vue({
  el: '#app',
  data: {
    message: "わーい"
  }
})

> わーい
> VueインスタンスのdataオブジェクトmessageがHTMLに渡って「わーい」が描画

双方向データバインディング

2/ v-model

index.html

  <div id="app">
    <div>
      <input type="text" v-model="message">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message: "わーい"
  }
})

=> VueインスタンスのdataオブジェクトmessageがHTMLに渡って「わーい」が描画

先ほどと違いがないように思える

双方向と単方向データバインディングの違い

データオブジェクトの値を動的に描画する

index.html

  <div id="app">
    <div>
      {{ message1 }}
      <input type="text" v-bind:value="message1"></br></br>
      {{ message2 }}
      <input type="text" v-model="message2">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message1: "わーい",
    message2: "わーい"
  }
})

双方向データバインディングはデータオブジェクトの変化を動的に描画する

【流れ】
1. Vueインスタンスから渡されたdataオブジェクトをViewで描画
2. Viewで変更されたdataオブジェクトがVueインスタンスの値を更新
3. 更新されたVueインスタンスのdataオブジェクトを再描画

v-modelの別記法

• v-bind + v-on

index.html

  <div id="app">
    <div>
      {{ message1 }}
      <input type="text" v-bind:value="message1" v-on:input="message1=$event.target.value"></br></br>
      {{ message2 }}
      <input type="text" v-model="message2">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message1: "わーい",
    message2: "わーい"
  }
})

• -> v-bindで単方向データバインディング
• -> v-on でVueにデータオブジェクトの変更を伝える