The core of realizing bidirectional data binding in vue is v-model
Example:
<input type="text" name=" " v-model="userName">
When the content in the input box changes, such as the user enters hello world in the view, we will get the value entered by the user in the model layer, that is, where we use js to process the logic code.
On the contrary, when the model layer gives a value to userName, the value of the view layer will also be synchronized. In short, two-way refers to the view layer and model layer. Data binding is the data on the model, and the view and model are synchronously bound.
Simulating bidirectional data binding with native js
Use js to monitor data changes and synchronize the changed data to the page. In order to realize this function, we need to use a method of JS
Object.defineProperty
Definition: object The defineproperty () method will directly define a new property on an object, or modify an existing property of an object and return the object.
Syntax: object defineProperty(obj,prop,descriptor)
| parameter | explain |
| obj | Target object |
| prop | The name of the property or method that needs to be defined |
| descriptor | Characteristics of the target attribute |
descriptor has the following values
value
The value of the property. Can be any valid JavaScript value (value, object, function, etc.). The default is undefined.
var a= {};
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//Print 123
writable
When the writable value is true, the value of the attribute can be changed by the assignment operator. If it is false, the value of the property cannot be overridden and can only be read-only. The default is false.
var a = {};
Object.defineProperty(o, "b", {
value : 123,
writable : false
});
console.log(a.b); // Print 37
a.b = 25; // No error thrown (it will be thrown in strict mode, even if it has the same value before)
console.log(o.a); // Print 37, assignment does not work.
configurable
When the configurable value is true, the descriptor of the attribute can be changed and the attribute can be deleted from the corresponding object.
Once it is false, its (value, writable, configurable) can no longer be set to false by default.
var a= {}
Object.defineProperty(a,"b",{
configurable:false
})
Object.defineProperty(a,"b",{
configurable:true
})//error: Uncaught TypeError: Cannot redefine property: b
enumerable
Only when the enumerable key value is true will this property appear in the enumeration property of the object. The default is false.
var a= {};
Object.defineProperty(a,"b",{
value:3445,
enumerable:true//Note: when false, print out []
})
console.log(Object.keys(a));// Print ["b"]
set and get
The accessor (get and set) and wriable or value cannot be set in the descriptor at the same time, otherwise an error will occur, that is, you want to use
get and set, you can't use either wriable or value.
var a= {}
Object.defineProperty(a,"b",{
set:function(newValue){
console.log("You want to assign it to me,My new value is"＋newValue)
},
get:function(){
console.log("Take my value")
return 2 //Return 2
}
})
a.b =1 //Print out the value you want to assign to me. My new value is 1
console.log(a.b) //Print you take my value 2
Example effect
Implementation code
Create an obj object, set an accessor attribute hello, listen to a keyup event in the text box, call the callback function, and reset obj The hello attribute is actually to call the set method of the internal attribute, and change the value of the text box and the innerHTML of the p tag in the set method, so as to achieve data binding.
<body>
<input type="text" placeholder="Your Name" id="input"/>
<h1>Hello,<span id="a"></span></h1>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('input').value = val;
document.getElementById('a').innerHTML = val;
}
});
document.addEventListener('keyup',function(e){
obj.hello = e.target.value;
})
</script>
</body>