A brief discussion on the principle of Vue's two-way event binding v-model

Unlike js or jQuery, which directly changes and operates the DOM, Vue uses v-model to implement two-way binding of data. It will automatically select the correct method to update the element according to the control type.

v-model is a two-way binding instruction of Vue, which can synchronously update the value of the control input on the page to the relevant bound data attribute, and also update the value of the input control on the page when updating the data binding attribute.

The official documentation explains:

v-model is just a syntax sugar, the real implementation still depends on

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

The following code

<input v-model="txt"> 

Essentially

<input :value="txt" @input="txt = $event.target.value">

explain:

When the vue instance is initialized, each property of data will be recursively traversed, and the get and set methods of each property will be monitored through defineProperty, so that once a property is reassigned, the change can be monitored to operate the corresponding page control

Look at the code below:

Object.defineProperty(data,"name",{
        get(){
            return data["name"];
        },
        set(newVal){
            let val = data["name"];
            if (val === newVal) {
                return;
            }
            data["name"]=newVal;
            // Listen for changes in attribute values. If node is the corresponding input node, node.value=newVal;
        }    
    })

Summarize

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

Object.defineProperty is used to control some special operations of an object's properties, such as read and write rights and whether it can be enumerated. Here we mainly study its corresponding two description properties get and set. v-model actually rewrites its get and set operations. 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: After each input event is triggered, the value of the input box is synchronized with the data, and the lazy modifier is added to convert it to using the change event for synchronization

<input v-model.lazy="msg">

trim: remove spaces from the beginning and end of a string

<input v-model.trim="msg">

number: Convert data into value type

<input v-model.number="msg">

This is the end of this article about the principle of Vue's two-way event binding v-model. For more relevant Vue two-way event binding v-model content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!