##データバインディングとは...？
- データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである
→ 一方を変更するともう一方を自動的に変更することだな。
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にデータオブジェクトの変更を伝える