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

Use CSS to prevent Lightbox to realize the display of large image code without refreshing when clicking on small image

Use CSS to prevent Lightbox to realize the displa...

How to implement Docker volume mounting

The creation of the simplest hello world output i...

MySQL log settings and viewing methods

MySQL has the following logs: Error log: -log-err...

What should I do if I want to cancel an incorrect MySQL command?

I typed a wrong mysql command and want to cancel ...

JavaScript Dom implements the principle and example of carousel

If we want to make a carousel, we must first unde...

In-depth analysis of nginx+php-fpm service HTTP status code 502

One of our web projects has seen an increase in t...

js implements simple provincial, municipal and district three-level selection cascade

This article shares the specific code of js to re...

Detailed tutorial on Docker pulling Oracle 11g image configuration

Without further ado Start recording docker pullin...

.NETCore Docker implements containerization and private image repository management

1. Introduction to Docker Docker is developed in ...

Detailed explanation of Promises in JavaScript

Table of contents Basic usage of Promise: 1. Crea...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

Detailed explanation of the wonderful uses of SUID, SGID and SBIT in Linux

Preface Linux's file permission management is...

Creation, constraints and deletion of foreign keys in MySQL

Preface After MySQL version 3.23.44, InnoDB engin...

Basic operations of mysql learning notes table

Create Table create table table name create table...

Detailed explanation of how to easily switch CSS themes

I recently added a very simple color scheme (them...