For example: Enter your username and password and press Enter to print out the information

<template> <div> <form @submit="onSubmit"> <label> <span> <span> <input type="text" V-model ="user.username"> <! -- <input type="text" :value="user.username" @input="user.username = $event.target.value"> --> </label> <label> </span> <input type="password" V-model ="user.password"> </label> <hr> <button type="submit"> </button> </form>  </div> </template> <script> export default { name: "App", data() { return { user: { username: "", password: "" } }; }, methods: {onSubmit() {console.log(' username: ${this.user.username} '); }}}; </script>Copy the code

V – the essence of the model

In text and textarea elements, the extension of v-model=” XXX “is: :value=” XXX” @input=” XXX = $event”>

  • Bind the value of XXX to value
  • When value changes, the input event is raised with a new value assigned to XXX
  • That is, listen for user input events to update data

So what does input do? We can wrap input ourselves

Customize the Input component

myInput.vue

<template> <div> <input :value="value" @input="onInput"> </div> </template> <script> export default { props: { value:String }, methods: { onInput(e) { this.$emit("input", e.target.value); // Expose the result}}}; </script>Copy the code

Use it:

<span> <my-input v-model="user.username"/> <! -- <my-input :value="user.username" @input="user.username = $event"/> --> </label> <label>Copy the code
  • Input Value is bound to the external variable value, which gets the value of XXX
  • When value changes, $emit fires an input event and exposes the new value for XXX to use

In fact, a V-Model on a component makes use of a prop named Value and an event named input by default, but input controls like checkboxes, checkboxes, and so on do not.

  • Checkbox and radio use checked Property and change events;
  • The SELECT field takes value as prop and change as an event.

Custom V-model for checkBox components

It is actually similar to the Input component, with the differences:

  • Declare the Checked external property in the props option of the component.
  • Added prop and Event declarations to the Model option

myCheckbox.vue

<template>
  <div id="red">
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  </div>
</template>
<script>
export default {
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  }
}
Copy the code

Use it in components

<myCheckbox v-model="checked1"/> <! -- <my-checkbox :checked="checked1" v-on:change="checked1=$event"/> -->Copy the code
  • The value of checked1 will be passed to the prop named Checked.
  • Checked changes trigger the change event with a new value
  • The value of checked1 will be updated.

The two-way binding is known as the V-Model

  • When you bind a variable, the UI changes when the variable changes, and when the user changes the UI, the variable changes
  • V-model is the syntax-sugar of V-bind :value and V-on :input.
  • V-on :input=”
  • To use XXX = $event.target.value in a native component
  • To use XXX = $event in a custom component

Input automatically refreshes after enter

Listening for keyboard events on input is too cumbersome; you can do so

  • Write a form and bind the submit event
  • The form requires a button that can be clicked to trigger a submit event