This article describes one-way binding and two-way binding. Share it for your reference, as follows:
1. One-way binding
Implementation ideas for one-way data binding:
① There is only one copy of all data
② Once the data changes, go to update the page (onlydata-->DOM,NoDOM-->data)
③ If the user updates on the page, it will be collected manually (two-way binding is automatically collected) and merged into the original data.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div >
{{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.
usev-modelDirectives to implement two-way binding of views and data.
The so-called two-way binding refers to the data in the vue instance being consistent with the content of the DOM element it renders. No matter who is changed, the other party will update to the same data accordingly. This is achieved by setting the property accessor.
v-modelIt is mainly used in the input input box of the form to complete the two-way binding of the view and data.
v-modelOnly used in<input>、<select>、<textarea>on these form elements.
Disadvantages of two-way binding: Don't knowdataI don't know who changed when it changed, and I won't notify you after the change. Of coursewatchCome and listendataThe changes, but this is complicated, and it is not as good as one-way binding.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div >
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
I hope this article will be helpful to everyone's programming.