Detailed explanation of v-mode in vue and detailed explanation of usage examples

Basic usage

In basic usage,v-modelDirectives can be used on the following three types of form input elements:

<input>
<textarea>
<select>

Use on these elementsv-modelDirectives that can bind its value to a data attribute in two-way. For example:

<div >
  <p>Message is: {{ message }}</p>
  <input v-model="message">
</div>

const app = ({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
('#app');

In this example, we usev-modelThe command will<input>The value of the element andmessageThe data attributes are bidirectionally bound. When the user enters text in the input box,messageThe value of , will be updated in real time and vice versa.

Advanced Usage

In advanced usage,v-modelThe instructions can be used in the following situations:

Custom modifiers
Custom events
Use on componentsv-model

existv-modelIn directives, modifiers can be used to modify their default behavior. For example:

Custom modifiers

.lazy: The data will not be updated when the input box loses focus or the user presses the Enter key.
.number: Automatically convert the value entered by the user to a numeric type.
.trim: Automatically remove the beginning and end spaces entered by the user.

For example:

<div >
  <p>Message is: {{ message }}</p>
  <input ="message">
  <input ="age">
  <input ="name">
</div>

const app = ({
  data() {
    return {
      message: 'Hello Vue!',
      age: 0,
      name: ''
    };
  }
});
('#app');

In this example, we use.lazy、.numberand.trimThree modifiers have been modified separatelyv-modelThe default behavior of directives.

Custom events

In some cases, we need to trigger a custom event when the data is updated, which can be usedv-modelCustom event function for directives. For example:

<div >
  <p>Message is: {{ message }}</p>
  <input v-model="message" @input="onInput">
</div>

const app = ({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    onInput(event) {
      ();
    }
  }
});
('#app');

In this example, we<input>Used on the elements at the same timev-modelInstructions and@inputEvent listener. When the user enters text in the input box,messageThe value of theonInputmethod.

Use on componentsv-model

In custom components we can usev-modelDirective to implement bidirectional data binding with parent components. For example:

<div >
  <p>Message is: {{ message }}</p>
  <my-input v-model="message"></my-input>
</div>

const MyInput = {
  props: ['modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $)">
  `
};
const app = ({
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
('#app');

In this example, we define a name calledMyInputCustom components and used in itv-modelinstruction. In the component, we usepropsand$emitTo implement bidirectional data binding with the parent component. When the user enters text in the input box,messageThe value of , will be updated in real time and vice versa.

Principle & Default

Used in componentsv-modelThe principle is: the parent component passes a value to the props property of the child component, and the child component passes the$emitThe method triggers a custom event that passes the new value back to the parent component. After the parent component receives the new value, it updates the data, thereby achieving two-way binding.

Use in componentsv-modelWhen a component needs to be definedmodelOption, which is used to specifyv-modelBinded props and events.modelAn option is an object that contains the following two properties:

prop: Used to specify the binding prop name, default isvalue。
event: Used to specify the event name that triggers the update, the default isinput。

For example, in a custom input box component, we can usev-model：

<template>
  <input :value="value" @input="$emit('input', $)">
</template>
<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

In this example, we define avalueprop, used to receive the value passed by the parent component. At the same time, we define amodelOption, specifiedpropforvalue，eventforinput. This means that when the user enters content in the input box, the component triggers ainputevent and pass new value$emitThe method is passed back to the parent component. After the parent component receives the new value, it updates the data, thereby achieving two-way binding.

When using this component in the parent component, you can use it like thisv-model：

<template>
  <div>
    <p>Message is: {{ message }}</p>
    <my-input v-model="message"></my-input>
  </div>
</template>
<script>
import MyInput from './';
export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
}
</script>

In this example, we use the parent componentv-modelInstructions,messageData binding tomy-inputon component. When the user enters content in the input box, the component triggers ainputevent and pass the new value back to the parent component. After the parent component receives the new value, update itmessagedata, thus achieving two-way binding.

It should be noted that it is used in componentsv-modelmust be defined in the componentmodelOptions, otherwisev-modelI don't know which prop and event to bind to. Also, use it in the parent componentv-modelWhen , the value of the child component must be bound to a data attribute, otherwise two-way binding cannot be achieved.

In short, use in componentsv-modelTwo-way data binding between components and parent components can be implemented, and the principle is implemented through props and events. Use in componentsv-modelWhen, it needs to be definedmodelOptions, specify the bound prop and event. Use in parent componentv-modelWhen , the value of the child component needs to be bound to a data attribute to achieve two-way binding.

This is the article about the detailed explanation of v-mode in vue and specific usage examples. For more related content on vue v-mode usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!