Vue.js一方向バインディングと双方向バインディングの実例分析
本論文の例はVue.jsの一方向結合と双方向結合について述べる。皆さんに参考にしてあげます。具体的には以下の通りです。
1、一方向バインディング
単一データバインディングの実現構想：
①すべてのデータは一つしかない
②データが変化したら、ページを更新します。（data-->DOMがありません。DOM-->dataがありません。）
③ユーザーがページ上で更新したら、手動で収集（双方向バインディングは自動収集）し、既存のデータに統合する。
データの双方向結合はvue実現の大きな機能である。
双方向バインディングとは、vueの例のdataとレンダリングされたDOM要素の内容が一致していることを意味し、誰が変更されても、他の一方は対応して同じデータに更新される。これは属性アクセスを設定することによって実現されます。
双方向結合の欠点：dataがいつ変わったかは分かりません。誰が変わったかは分かりません。変化後も通知しません。もちろん、
1、一方向バインディング
単一データバインディングの実現構想：
①すべてのデータは一つしかない
②データが変化したら、ページを更新します。（data-->DOMがありません。DOM-->dataがありません。）
③ユーザーがページ上で更新したら、手動で収集（双方向バインディングは自動収集）し、既存のデータに統合する。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
データの双方向結合はvue実現の大きな機能である。
v-modelコマンドを使用して、ビューとデータの双方向バインディングを実現します。双方向バインディングとは、vueの例のdataとレンダリングされたDOM要素の内容が一致していることを意味し、誰が変更されても、他の一方は対応して同じデータに更新される。これは属性アクセスを設定することによって実現されます。
v-modelは主にフォームのinput入力ボックスで使用され、ビューとデータの双方向バインディングが完了します。v-modelは、「input」、「select」、「textarea」といったフォーム要素にのみ使用できます。双方向結合の欠点：dataがいつ変わったかは分かりません。誰が変わったかは分かりません。変化後も通知しません。もちろん、
watchでdataの変化をモニターできます。でも、この複雑さは一方向結合に及ばないです。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>