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 explanation of the idea of ​​setting up login verification interception function in Vue

Table of contents 1. Solution 2. Let the browser ...

Gradient slide effect implemented by CSS3

Achieve results Code html <div class="css...

MySql fuzzy query json keyword retrieval solution example

Table of contents Preface Option 1: Option 2: Opt...

Use of Linux chkconfig command

1. Command Introduction The chkconfig command is ...

Method example of safely getting deep objects of Object in Js

Table of contents Preface text parameter example ...

Using zabbix to monitor the ogg process (Windows platform)

This article introduces how to monitor the ogg pr...

A comprehensive analysis of what Nginx can do

Preface This article only focuses on what Nginx c...

Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect

Table of contents 1. Introduction 2. Usage 3. Dev...

React implements the addition, deletion, modification and query of todolist

Table of contents Take todolist as an example The...

How to insert pictures into HTML pages and add map index examples

1. Image formats supported on the WEB: GIF: can s...

MySQL database implements MMM high availability cluster architecture

concept MMM (Master-Master replication manager fo...

Ten important questions for learning the basics of Javascript

Table of contents 1. What is Javascript? 2. What ...

CSS float property diagram float property details

Using the CSS float property correctly can become...

Detailed explanation of the use of MySQL group links

Grouping and linking in MYSQL are the two most co...

In-depth understanding of the use of Vue

Table of contents Understand the core concept of ...