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

In-depth explanation of JavaScript this keyword

Vue implements simple data two-way binding

In-depth explanation of JavaScript this keyword

Example code for implementing multiple line omissions using three methods of advanced CSS

Detailed explanation of various practical uses of virtual device files in Linux system

Centos builds chrony time synchronization server process diagram

mysql wildcard (sql advanced filtering)

How to check if data exists before inserting in mysql

Detailed explanation of deploying Elasticsearch kibana and ik word segmenter in docker

Implementation of React page turner (including front and back ends)

Implementation of Nginx filtering access logs of static resource files

Summary of the differences and usage of plugins and components in Vue

Recommend

Detailed steps for quick installation of openshift

Solution to the problem of a large number of php-cgi.exe processes on the server causing the CPU to occupy 100%

Learn about JavaScript closure functions in one article

Modification of the default source sources.list file of ubuntu20.04 LTS system

A brief discussion on order reconstruction: MySQL sharding

Docker image import, export, backup and migration operations

5 ways to migrate Docker containers to other servers

Detailed analysis of replication in Mysql

Summary of frequently used commands for Linux file operations

Which one should I choose between MySQL unique index and normal index?

Solutions to VMware workstation virtual machine compatibility issues

An example of implementing a simple finger click animation with CSS3 Animation

Detailed explanation of how to build phalcon environment under nginx server on centos7 system

How to implement load balancing in MySQL

Multiple ways to insert SVG into HTML pages