Vue implements simple data two-way binding

Vue implements simple data two-way binding

This article example shares the specific code of Vue to achieve simple data two-way binding for your reference. The specific content is as follows

Here is a simple implementation, which helps novices understand and digest. Of course, Vue is indispensable for realizing two-way data proxy. I look forward to the subsequent update.

Vue two-way data binding

-> Object.defineProperty() //2.0 core syntax
-> Data Agent
-> Two-way binding
-> Subscribe to publish mode
compile-> template parsing (template template html instruction {{expression}})
observer->Observer (subscribe and publish) All attributes in data are used for data hijacking and data proxy
watcher-> Triggered after all attributes in the monitoring data are changed

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <p id="lc"></p>
  </body>
</html>
<script>
  //Get the page element var ipt = document.getElementById("ipt");
  var ps = document.getElementById("lc");

  var obj = { name: "" };

  //The core principle of vue two-way data binding applicationObject.defineProperty(obj, "name", {
    get() {
      return ipt.value;
    },
    set(newval) {
      ipt.value = newval;
      ps.innerHTML = newval;
    },
  });

  //Monitor data changes in input and assign values ​​to p tags ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value;
  });
</script>

Effect display:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue.js data binding methods (one-way, two-way and one-time binding)
  • Detailed explanation of Vue.js getting data based on $.ajax and binding it with component data
  • A brief discussion of my personal understanding of the v-model directive for checkbox data binding in Vue
  • Vue.js implements two-way data binding method (form automatic assignment, form automatic value acquisition)
  • A brief talk about various data bindings of Vue templates
  • Vue.js must learn data two-way binding every day
  • Vue implements dynamic binding id of data returned by v-for loop
  • The implementation principle of two-way data binding between Angular and Vue (focusing on two-way binding of Vue)
  • Detailed explanation of Vue.js data binding operation
  • Detailed explanation of the difference between the way vue style binds background-image and other variable data

<<:  Solve the problem of wireless and audio not working after Windows Server installation

>>:  MySQL case when group by example

Recommend

Detailed tutorial for installing mysql5.7.21 under Windows

This article shares the installation tutorial of ...

Detailed explanation of common operations of Docker images and containers

Image Accelerator Sometimes it is difficult to pu...

Analysis of the methods of visual structure layout design for children's websites

1. Warm and gentle Related address: http://www.web...

Markup Language - Title

Click here to return to the 123WORDPRESS.COM HTML ...

How to configure environment variables in Linux environment

JDK download address: http://www.oracle.com/techn...

MySQL 8.0.12 decompression version installation tutorial personal test!

Mysql8.0.12 decompression version installation me...

Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

Copy code The code is as follows: <!DOCTYPE ht...

Introduction to the process of using NFS remote directory mounting in CentOS environment

Table of contents 1. Introduction to NFS 2. NFS C...

MySQL installation and configuration tutorial for Mac

This article shares the MySQL installation tutori...

Detailed comparison of Ember.js and Vue.js

Table of contents Overview Why choose a framework...

Detailed explanation of JavaScript array deduplication

Table of contents 1. Array deduplication 2. Dedup...

vue-cropper plug-in realizes the encapsulation of image capture and upload component

The specific code for encapsulating the image cap...

Zookeeper stand-alone environment and cluster environment construction

1. Single machine environment construction# 1.1 D...

Detailed explanation of TIMESTAMPDIFF case in MySQL

1. Syntax TIMESTAMPDIFF(unit,begin,end); Returns ...

Detailed explanation of moment.js time and date processing

Monday to Sunday time format conversion (Y --- ye...