Use data hijacking
The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue V-M</title>
</head>
<body>
<div >
<input type="text"><br/>
<div ></div><br/>
<button type="button">Print</button>
</div>
<script>
var input = ('#input');
var text = ("#text");
var button = ("#button");
var data = {value:''};
(data, 'value', {
get:function(){
('get value ',);
return ;
},
set:function(value){
('set value ',value);
= value;
= value;
}
});
("keyup", function (e) {
= ;
}, false)
('click',function(e){
('data ',data);
},false);
</script>
</body>
</html>Summary of the principles of vue two-way binding
MVVM
The bidirectional binding of the view model is the abbreviation of Model-View-ViewModel, which means that the Controller in MVC becomes a ViewModel. The Model layer represents the data model, the View represents the UI component, and the ViewModel is the bridge between the View and Model layers. The data will be bound to the viewModel layer and automatically render the data to the page. When the view changes, the viewModel layer will be notified to update the data. In the past, it was an operation of the DOM structure update view, but now it is a data-driven view.
advantage:
1. Low coupling. Views can be changed and modified independently of Model. A Model can be bound to different Views. When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged;
2. Reusability. You can put some view logic in a Model to allow many Views to reuse this view logic.
3. Independent development. Developers can focus on the development of business logic and data (ViewModel), and designers can focus on page design.
4. Testable.
The data (model) changes actively trigger the ui (view) changes, and the ui (view) changes actively trigger the data (model) changes. Of course, the ui change here specifies the user input in the form. It can be commonly understood as: add a change (input) event to the input elements (input, textarea, etc.) on the basis of one-way binding to dynamically modify the model and view.
Two-way binding in vue
It uses data hijacking combined with publisher-subscriber mode to hijack the setters and getters of each attribute through () to publish messages to the subscriber when the data changes, triggering the corresponding listening callback.
Implemented using v-model / .sync, v-model is the syntactic sugar for v-bind:value and v-on:input
- v-bind:value implements one-way binding of data ⇒ UI
- v-on:input implements one-way binding of UI ⇒ data
Extended how to implement these two one-way bindings
Implementation of v-bind
Create getters and setters for data through the API to listen for data changes. Once data changes, it will arrange changes to the UI
Implementation of v-on
Add event listening to the DOM through template compiler, and the DOM input value will be modified.
Compile (instruction parser)
Compile's main thing is to parse template directives, replace variables in the template with data, then initialize the rendering page view, and bind the node corresponding to each instruction to update functions, add subscribers to identify data, and once the data changes, you receive a notification and update the view.
Observer (data listener)
The core of Observer is to monitor data changes through (). This function can define setters and getters inside. Whenever the data changes, the setter will be triggered. At this time, Observer will notify the subscriber, and the subscriber is the Watcher
Watcher (subscriber)
Watcher subscribers, as a bridge of communication between Observer and Compile, do mainly:
- When instantiating itself, add yourself to the attribute subscriber (dep)
- You must have an update() method
- When the property change() is notified, the update() method can be called and the callback bound in Compile can be triggered.
This is the article about the basic principles of view-model bidirectional binding in vue. This is the end. For more related view-model bidirectional binding content in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!