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

Teach you how to subcontract uniapp and mini-programs (pictures and text)

Table of contents 1. Mini Program Subcontracting ...

Install MySQL database 5.6 source code under Linux and change the login user password

This article mainly explains how to install the M...

Vue uses el-tree lazy loading to implement the add, delete, modify and query functions

About the tree display of Vue, the project is use...

CentOS system rpm installation and configuration of Nginx

Table of contents CentOS rpm installation and con...

html base url tag

Its function is to set a global style. Then your s...

MySQL 5.7.21 installation and password configuration tutorial

MySQL5.7.21 installation and password setting tut...

How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing

Related Documents Part of this article is referen...

How to install mongodb 4.2 using yum on centos8

1. Make a repo file Refer to the official install...

Master-slave synchronization configuration of Mysql database

Table of contents Mysql master-slave synchronizat...

Solve the problem of "Welcome to nginx on Fedora!" after installing nginx on Centos7, and there is no default.conf file in the conf.d directory

Problem Description Install nginx on Tencent Clou...

Learn v-model and its modifiers in one article

Table of contents Preface Modifiers of v-model: l...

Analysis of the method of setting up scheduled tasks in mysql

This article uses an example to describe how to s...

Detailed explanation of MySQL alter ignore syntax

When I was at work today, the business side asked...

JavaScript to achieve mouse drag effect

This article shares the specific code of JavaScri...

Detailed explanation of MySQL data grouping

Create Group Grouping is established in the GROUP...