Home > Article > Web Front-end > What is the principle of two-way binding in Vue? Implementation of the principle of vue two-way binding
This article brings you what is the principle of vue two-way binding? The principle implementation of Vue two-way binding has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First the renderings
Simple implementation of two-way binding of data
First let’s understand one thing : Object.defineProperty()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Here is MDN’s detailed description of this
To put it simply:
This method can modify the value of the existing object property
Object.defineProperty (obj, prop, descriptor)
Parameter description:
obj: object defining attributes
prop: modified attribute
descriptor: modified attribute descriptor
Only select here To put it simply,
get:
Official: A method that provides a getter for a property. If there is no getter, it is undefined. When the property is accessed, the method will be executed. No parameters are passed in when the method is executed, but the this object will be passed in (due to the inheritance relationship, this here is not necessarily the object that defines the property). Default is undefined.
**Simply put: when you need to get the attribute value of an object, just call this function and get the value**
set:
Official: A method that provides a setter for a property, or undefined if there is no setter. This method is triggered when the property value is modified. This method will accept the only parameter, which is the new parameter value of the property. Default is undefined.
**Simply put: when you need to set (change) the attribute value of an object, just call this function to achieve the modified **
The next code
nbsp;html> <meta> <meta> <title></title> <div></div> <div> <input> </div> <script> var data = {}; var dom_aa = document.getElementById("aa") function changedata(value){ data.a = value } //直接使用Object.defineProperty里面的set方法进行视图改变 Object.defineProperty(data,"a",{ set:function(newValue){ dom_aa.innerHTML = newValue; }, get:function(){ return a; } }) </script>
Related recommendations:
vue Exploring the principles of two-way data binding
The above is the detailed content of What is the principle of two-way binding in Vue? Implementation of the principle of vue two-way binding. For more information, please follow other related articles on the PHP Chinese website!