Using js to implement the two-way binding function of data in Vue2.0

Using js to implement the two-way binding function of data in Vue2.0

Object.defineProperty Understanding

grammar:

Object.defineProperty(obj, prop, descriptor)

  • obj The object for which the properties are to be defined.
  • prop The name of the property to define or modify
  • descriptor The property descriptor to be defined or modified

obj and prop are easy to understand. For example, we define a variable as

const o = {
    name:'xbhog'
}

Among them, obj refers to o, and prop refers to o.name. Next, let's take a look at the descriptor.

descriptor Some characteristics of the target object attributes (it is an object)
There are 6 parameters under descriptor
Parameter 1:
value: attribute value
Parameter 2:
writable: Whether the object property value can be modified. True allows. False does not allow.
Parameter 3:
configurable: Whether the object property can be deleted. True allows it. False does not allow it.
Parameter 4:
enumerable: Whether the object property can be enumerated
Parameter 5:
get(): is a function. When the property is accessed, the function is automatically called and the function return value is the value of the property.
Parameter 6:
set(): is a function that is automatically called when the property is modified. The function has one and only one parameter, the new value to be assigned

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

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

Let's look at the implementation code first:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Realize two-way data binding through js</title>
</head>
<body>
    
<input type="text"/><br>
<h1>Hello: <span>Update data</span></h1>


<!-- Realize two-way data binding through js -->
<script>
	// The 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 types something.
	    This event is triggered when the value of an <input> or <textarea> element changes.
	 */
    ipt.oninput = function(){
	// Pass the value in ipt.value to the value of data.name
        data.name = ipt.value;
    }
    //Hijack ipt.value
    Object.defineProperty(data,"name",{
    //Data subscription get(){
        return ipt.value; //The get method will be called when accessing},
    //Data hijacking //name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

First, we use document.querySelector to get the Html objects of the input and span tags, and then define a data object with the attribute name empty.

Use the oninput event listener to monitor user input (this event is triggered when the value of an <input> or <textarea> element changes).

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

data.name = ipt.value;

Use Object.defineProperty to hijack user input data.

  • get attribute: It is a function. When the attribute is accessed, the function is automatically called, and the function return value is the value of the attribute.
  • set property: is a function. When the property is modified, the function is automatically called. The function has one and only one parameter, the new value to be assigned.
Object.defineProperty(data,"name",{
    //Data subscription get(){
       return ipt.value; //When accessing data.name, the get method will be called to call ipt.value to get the current value},
    // Data hijacking set(value) { // The set method will be automatically called when setting data p.innerHTML = value;
        ipt.value = value;
    }

The effect is more obvious:

Set method:

Get method:

The final effect:

References:

  • https://blog.csdn.net/Doulvme/article/details/107978012
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  • https://www.jianshu.com/p/6f589af16ad4
  • //www.jb51.net/article/217657.htm (recommended)

Summarize

This is the end of this article about using js to implement the two-way data binding function in Vue2.0. For more relevant content about using js to implement Vue2 two-way binding, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example code of vue custom component to implement v-model two-way binding data
  • The principle and implementation of two-way binding in Vue2.x
  • Implementation of two-way binding of parent-child component data in front-end framework Vue
  • A brief discussion on the principle of Vue's two-way event binding v-model
  • How to implement two-way binding function in vue.js with pure JS
  • Detailed explanation of Vue two-way binding

<<:  The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"

>>:  Implementation of debugging code through nginx reverse proxy

Recommend

Native js implements custom scroll bar component

This article example shares the specific code of ...

How to change the root password in a container using Docker

1. Use the following command to set the ssh passw...

How to implement mask layer in HTML How to use mask layer in HTML

Using mask layers in web pages can prevent repeat...

Example of how to quickly build a LEMP environment with Docker

LEMP (Linux + Nginx + MySQL + PHP) is basically a...

Implementing file content deduplication and intersection and difference in Linux

1. Data Deduplication In daily work, there may be...

js implements clock component based on canvas

Canvas has always been an indispensable tag eleme...

Command to view binlog file creation time in Linux

Table of contents background analyze method backg...

Solution to the problem of slow docker pull image speed

Currently, Docker has an official mirror for Chin...

Summary of Problems in Installation and Usage of MySQL 5.7.19 Winx64 ZIP Archive

Today I learned to install MySQL, and some proble...

Detailed explanation of MySQL sql_mode query and setting

1. Execute SQL to view select @@session.sql_mode;...

Troubleshooting MySQL high CPU load issues

High CPU load caused by MySQL This afternoon, I d...

WeChat applet to obtain mobile phone number step record

Preface Recently, I encountered such a problem wh...

A brief introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags

Difference between HTML and XHTML 1. XHTML elemen...

Jenkins packaging microservices to build Docker images and run them

Table of contents Environment Preparation start 1...

MySQL 8.0.18 installation and configuration method graphic tutorial (linux)

This article records the installation and configu...