When the two-way binding of data is adopted, the data hijacking model is adopted. In fact, it mainly uses the getters and setters in Es5 to hijack each attribute. This is also the reason why Vue is incompatible with IE8 or below.
();
var obj = {};
(obj,"hello",{
enumerable: true, // means that this property can be looped through the for -- in loop (whether it is enumerable); configurable: true, //Indicate whether this attribute can be deleted with delete get(){ //Get the attribute value, to put it bluntly, it is the return value return ;
},
set(newVale){ //Troubleshooting attributes (to put it bluntly: it is to provide a method to determine the return value during the assignment process) = newVale + 5;
(); // 10
}
})
= 5;
() ; // 10
3. Implement simple two-way binding
<input type="text" >
<div ></div>
<script type="text/javascript">
var obj = {};
(obj,`value`,{
enumerable: true,
configurable: true,
get(){
return ;
},
set(newValue){
(`b`).innerText = newValue;
= newValue; //66
}
});
(`a`).addEventListener(`input`,function(event){
var text = ; //66
= text;
},false)
</script>
This method is simple and crude, and the binding is completed directly by operating the DOM. I think some people will definitely think that if you write like this, it is better to directly assign values to the DOM element with Id B in the input event. Isn’t this an unnecessary move? Please see how we can implement it in the framework below.
4. Implement a simple v-model
First, we need to obtain the real element node in the document, that is, the element mount point (el) in the real VUE in VUE; after creating document fragments through createDocumentFragment, after the parsing operation is completed, the fragments are placed in the DOM.
<div >
<input type="text" v-model="text">
{{text}}
</div>
<script type="text/javascript">
function Model(node, vm) {
if(node) {this.$frag = (node, vm);
return this.$frag;
}
}
= {
construtor:'Model',
nodeToFragment: function(node, vm) {
var self = this;
var frag = ();
var child;
while(child = ) {
(child, vm);
(child);
// Add all child nodes to the fragment, child is a reference to the first child node of the element.// Append the object pointed to by the child reference to the end of the parent object, and the object referenced by the child jumps to the end of the frag object.// And child points to the element object that was originally ranked second. If you cycle like this, the link will jump back one by one }
return frag;
},
moelElement: function(node, vm) {
var reg = /\{\{(.*)\}\}/; //Match {{}} () Get the matched value //The node type is an element if( === 1) {
var attr = ;
// parse attributes for(var i = 0; i < ; i++ ) {
if(attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // Get the attribute name of the v-model binding ('input', function(e) {
// Assign a value to the corresponding data attribute, and then trigger the set method of the attribute [name]= ;
});
= [name]; // Assign the value of data to the node ('v-model');
}
};
}
//The node type is text if( === 3) {
if(()) {
var name = RegExp.$1; // Get the matching string () grouping in the regular string. Get the first grouping via $1 name = ();
= [name]; // Assign the value of data to the node }
}
},
}
function Vue(options) {
= ;
var data = ;
var id = ;
var dom =new Model((id),this);
// After compilation is completed, return the dom to the app (id).appendChild(dom);
}
var vm = new Vue({
el: 'app',
data: {
text: 'hello world'
}
});
</script>
Here we mainly learn how to handle instructions in VUE. Here you can add custom commands. At the same time, I understand how custom instructions are implemented. Of course, the two-way binding of data has not been implemented yet.
The above is the two-way data binding in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!