Data processing is an important part of Vue. Js development, especially as Vue is a framework for MVVM, which is often referred to as two-way data binding. The general principle of two-way data binding is that when data changes, the view changes with it; As the view changes, the data changes along with it.

Vue. Js adopts data hijacking combined with publiser-subscriber mode. It is implemented by redefining the operations of obtaining and setting property values according to object.defineProperty (), that is, hijacking setter and getter of each property. A message is published to the subscriber when the data in the data source changes, and the corresponding listening callback is triggered.

Take a simple example:

<div id=”mvvm-app”>

< input type = “text” v – model = “title” >

        {{ title }}

    </div>

    <script>

        var vm = new Vue({

            el: ‘#app’,

            data: {

title: ‘hello Vue! ‘

            }

        });

    </script>

 

Vue realizes the two-way binding of data, through the example of the input box to do the example, the whole implementation process can be divided into the following steps: ****

1. First, bind the input box and text node to the data in data;

2. Then, when the content of the input box changes, the data in data changes synchronously. View => model;

3. Finally, when the data in data changes, the content of the text node changes synchronously. The model => view changes.

We use Object.defineProperty() to define the set method of an attribute. When the attribute is assigned, we modify the Input value and innerHTML in the SPAN. Then listen to the input keyUP event and modify the attribute value of the object to achieve simple two-way data binding.

Here’s another example, the details are as follows;

<template v-slot:content>

        <div class=”content”>

          <a-row class=”timePicker arow”>

            <a-col :span=”8″>

<span class=”title”>

<a-input placeholder=” input here”

                       class=”rightPart”

                       v-model=”taskName” />

            </a-col>

        </div>

      </template>

 

data() {

    return {

      taskName: “”,

    };

  },

 

methods: {

// The method to get the task name

    getName(e) {

      let val = e.target.value.trim();

this.taskName = val; // Assign a value to taskName

    },

}

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!