Brief discussion on the principle of vue to implement two-way event binding v-model

Unlike js or jquery to directly change the operation dom, vue uses v-model to implement two-way binding of data, which will automatically select the correct method according to the control type to update elements.

v-model is a two-way binding instruction of vue. It can synchronize the value entered by the control on the page to the relevant bound data attributes. It will also update the value of the input control on the page when updating the data binding attributes.

The official documentation explains this:

v-model is just a syntactic sugar, what is the real implementation depend on?

• v-bind:Binding responsive data
• Trigger input event and pass data (core and focus)

The following code

<input v-model="txt"> 

Essentially

<input :value="txt" @input="txt = $">

explain:

When initializing a vue instance, it will recursively traverse each property of data, and listen to the get and set methods of each property through defineProperty. So once a certain property is reassigned, it can listen to changes to operate the corresponding page control.

Look at the code below:

(data,"name",{
        get(){
            return data["name"];
        },
        set(newVal){
            let val=data["name"];
            if (val===newVal){
                return;
            }
            data["name"]=newVal;
            // Listen to the change of attribute value, if the node is its corresponding input node            =newVal;
        }    
    })

Summarize

On the one hand, the modal layer hijacks each attribute by hijacking it, and once the change is heard, updated through the relevant page elements. On the other hand, by compiling the template file, the input event is bound to the control's v-model, so that the page input can update the relevant data attribute value in real time.

Then it is used to control some unique operations of an object attribute, such as read and write rights and whether it can be enumerated. Here we will first study its corresponding two description attributes get and set. v-model is actually rewrites its get and set. Get is a function triggered by reading the value of the name attribute, and set is a function triggered by setting the value of the name attribute.

Replenish

v-model modifiers: .lazy, .trim and .number

lazy: Synchronize the input box's value with the data after each input event is triggered, and add a lazy modifier, thus transforming it to use the change event for synchronization

<input ="msg">

trim: Remove spaces at the beginning and end of a string

<input ="msg">

number: converts data into value type

<input ="msg">

This is the article about this brief discussion on the principle of vue to implement two-way event binding v-model. For more related vue two-way event binding v-model content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!