1. One-way binding
One-way data binding implementation ideas:
① Only one copy of all data
② Once the data changes, update the page (only data-->DOM, no DOM-->data)
③ If the user makes an update on the page, it is collected manually (two-way binding is automatic collection) and merged into the original data.
The single binding code is as follows:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{message}} </div> <script>
var app = new Vue ({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
2. Two-way binding
Two-way binding of data is a major function implemented by Vue.
Use the v-model directive to implement two-way binding of views and data.
The so-called two-way binding means that the data in the vue instance is consistent with the content of the DOM element it renders. No matter who is changed, the other party will update the same data accordingly. This is achieved by setting property accessors.
v-model is mainly used in the input box of the form to complete the two-way binding of view and data.
v-model can only be used on form elements such as <input>, <select>, and <textarea>.
Disadvantages of two-way binding: I don't know when the data has changed, and I don't know who has changed, and it will not be notified after the change. Of course, you can watch to monitor the change of data, but this is complicated, and it is not as good as one-way binding.
<!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>