Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use js to achieve the two-way binding of data in Vue2.0 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use js to achieve two-way binding of data in Vue2.0 will have a harvest, let's take a look at it.

Object.defineProperty understands

Syntax:

Object.defineProperty (obj, prop, descriptor)

The object for which obj wants to define the property.

The name of the attribute to be defined or modified by prop

The property descriptor to be defined or modified by descriptor

Obj and prop are easy to understand, for example, we define a variable as

Const o = {name: "xbhog"}

Where obj means "o.name" and "o.name". Let's take a look at descriptor.

Some characteristics of descriptor target object properties (is an object)

There are 6 parameters under descriptor

Parameter 1:

Value: attribute valu

Parameter 2:

Writable: whether object attribute values can be modified true allows false to disallow

Parameter 3:

Configurable: whether object attributes can be deleted true allows false to disallow

Parameter 4:

Enumerable: whether object properties can be enumerated

Parameter 5:

Get (): is a function. When the property is accessed, the function is called automatically, and the value returned by the function is the value of the property.

Parameter 6:

Set (): is a function. When the property is modified, the function is called automatically. The function has one and only one parameter, the new value of the assignment.

Note: the value attribute writable attribute and the get attribute set attribute in the descriptor are mutually exclusive, and only one can exist

Knowing the pre-knowledge, let's implement the two-way binding of v-model in Vue

Let's first look at the implementation code:

Two-way data binding through js

Hello: the update data / / method returns the first HTMLElement object in the document that matches the specified selector or selector group var ipt = document.querySelector ("input"); var p = document.querySelector ("span"); var data = {name: ""}; / * the oninput event is triggered when the user enters it. This event is triggered when the value of the or element changes. * / ipt.oninput = function () {/ / pass the value in ipt.value to data.name value data.name = ipt.value;} / / hijack ipt.value Object.defineProperty (data, "name", {/ / data subscription get () {return ipt.value) / / the get method is called when accessing, / / data hijacking / / name:value set (value) {p [XSS _ clean] = value; ipt.value = value;}})

First, we get the Html object of input and span tags through document.querySelector. When we define a data object, the property name is empty first.

Use the event listener oninput to listen for user input (this event is triggered when the value of the or element changes).

Pass the value in ipt.value to the value of data.name

Data.name = ipt.value

Use Object.defineProperty to hijack the data entered by the user.

Get attribute: is a function. When the property is accessed, the function is called automatically, and the value returned by the function is the value of the property.

Set attribute: is a function. When the property is modified, the function is called automatically. The function has one and only one parameter, the new value of the assignment.

Object.defineProperty (data, "name", {/ / data subscription get () {return ipt.value; / / call the get method when accessing data.name, call ipt.value to get the value of the current value}, / / data hijack set (value) {/ / set data automatically call the set method p [XSS _ clean] = value; ipt.value = value;}

The effect is obvious:

Set method:

Get method:

Finally, the effect is achieved:

This is the end of the article on "how to use js to achieve two-way data binding in Vue2.0". Thank you for reading! I believe that everyone has a certain understanding of "how to use js to achieve the two-way binding function of data in Vue2.0". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.