Detailed explanation of how to use the v-model directive in the Vue documentation

Vue is a popular front-end framework. One of its core features is the responsive update of data, making it easier for developers to manage and maintain the user interface. As an important feature of Vue, the v-model directive can more conveniently realize two-way binding of data, making the user interface more flexible and easier to use. Let’s take a closer look at how to use the v-model directive in the Vue documentation.

1. The concept of v-model

The v-model instruction can realize two-way binding of data, that is, synchronize the data input by the user to the model, and also synchronize the data in the model to In the view, it is one of the important features in the Vue framework. The implementation is as follows:

1. Bind to the input box element

The v-model directive is built on the Vue form input element, including input boxes (text, password, number, etc.) , radio button (radio), check box (checkbox) and drop-down box (select), etc. The usage is as follows:

<input type="text" v-model="message">

The above code binds the message variable to the user input box by binding the v-model instruction to achieve two-way binding.

2. Bind to custom components

In addition to native form input elements, Vue also provides custom components that support the v-model directive. These components use model options to map internal values ​​to props, and only change this internal value when the input event fires. The sample code is as follows:

Vue.component('my-component', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

When defining a component, you need to declare a props option so that the v-model directive can bind the value variable to the component. Trigger the input event in the $emit function of the component and pass the value entered by the user to the component instance to achieve two-way binding.

2. Usage of v-model

1. Text input

The v-model command can be bound to the text input box element to achieve synchronous updates. In addition to the common single-line text boxes, Vue also supports the binding of multi-line text input boxes textarea, as shown below:

<input type="text" v-model="message"> 
 

For radio buttons and check boxes, v-model binds the selected state ( true or false), as shown below:

<input type="checkbox" v-model="checked">

2. Radio button

Using the v-model directive to bind the radio button box requires corresponding values ​​to the options, as shown below:

<input type="radio" v-model="picked" value="a">
<input type="radio" v-model="picked" value="b">

The v-model in the above code is bound to the picked variable. The value of each radio button corresponds to the value of the option. The value of the picked variable will also be updated when different options are selected.

3. Check box

Using the v-model instruction to bind the check box needs to be bound to a Boolean type variable, as shown below:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Complex The selected state of the check box is bound to a Boolean type variable, and {{ checked }} is bound to the value of the variable.

4. Drop-down box

The drop-down box also supports binding through the v-model instruction, as shown below:

<select v-model="selected">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

The v-model binding in the above code is The selected variable, each option in the drop-down box corresponds to the value.

3. Modifiers of v-model

Modifiers are extension symbols that are used after the v-model directive to change the default behavior of v-model. Vue provides multiple modifiers, which are explained one by one below:

1.lazy

By default, the v-model directive is a two-way binding triggered by the input event, that is, every Each input will update the data to the model, and the lazy modifier will change this behavior to a change event, which will allow v-model to synchronize the data to the model only in the blur event. The sample code is as follows:

<input type="text" v-model.lazy="message">

2.number

For the v-model directive with the "number" modifier, Vue will automatically convert the input into the Number type. The sample code is as follows:

<input type="text" v-model.number="message">

3.trim

The v-model command with the "trim" modifier will automatically filter the first and last blank characters entered by the user. The sample code is as follows:

<input type="text" v-model.trim="message">

4. The principle of v-model

The implementation principle of the v-model instruction is to use data hijacking technology. When the value attribute of the user input box changes, v-model will monitor the change and synchronize the change to the model. At the same time, it will also Changes are synchronized to the view. The specific implementation method is as follows:

1. Hijack data

The Vue framework hijacks data through the Object.defineProperty method. When the model variable is read, the get method will be triggered; and when When a model variable is assigned a value, the set method will be triggered; in the set method, the value of the model is updated and a notification of data update is triggered.

2. Monitor the DOM of the user input box

When the value of the user input box changes, the input event will be triggered; after receiving the input event, the v-model instruction will Values ​​entered by the user are synchronized into the model.

3. Notify the model

When the value of the model changes, the v-model directive will pass the new value to the form element bound to the directive to update the user interface.

5. Summary

The v-model directive is one of the important features in the Vue framework and plays a core role in the two-way binding of form data. Through the use of v-model, development efficiency and code maintainability can be improved in Vue development. At the same time, mastering the modifiers and principles of v-model will help you better understand the operating mechanism of the Vue framework and improve your front-end development skills.

The above is the detailed content of Detailed explanation of how to use the v-model directive in the Vue documentation. For more information, please follow other related articles on the PHP Chinese website!