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: "わーい"
  }
})

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

【流れ】

Vueインスタンスから渡されたdataオブジェクトをViewで描画
Viewで変更されたdataオブジェクトがVueインスタンスの値を更新
更新された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にデータオブジェクトの変更を伝える