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

MySQL Database Basics SQL Window Function Example Analysis Tutorial

Table of contents Introduction Introduction Aggre...

Implementation of Element-ui Layout (Row and Col components)

Table of contents Basic instructions and usage An...

CSS pixels and solutions to different mobile screen adaptation issues

Pixel Resolution What we usually call monitor res...

Detailed explanation of how to install the system on VMware workstation 14 pro (virtual machine)

This article introduces how to install the system...

Ten popular rules for interface design

<br />This is an article I collected a long ...

Detailed explanation of Angular parent-child component communication

Table of contents Overview 1. Overview of input a...

Share 6 invitation codes for unlimited activation of Alibaba Cloud Disk. If you don't believe me, you can activate Alibaba Cloud Disk.

It has been a long time since the last update of ...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

Specific use of CSS content attribute

The content attribute is generally used in the ::...

JS Easy to understand Function and Constructor

Table of contents 1. Overview 1.1 Creating a func...

Detailed explanation of CSS animation attribute keyframes

How long has it been since I updated my column? H...

The actual process of implementing the guessing number game in WeChat applet

Table of contents Function Introduction Rendering...

How to uninstall MySQL 5.7.19 under Linux

1. Find out whether MySQL was installed before Co...

A brief analysis of the difference between ref and toRef in Vue3

1. ref is copied, the view will be updated If you...

Javascript asynchronous programming: Do you really understand Promise?

Table of contents Preface Basic Usage grammar Err...