Common modifiers are generally divided into form modifiers (V-model modifiers) and event modifiers.

Form modifiers

1. .lazy

The data changes when the input field changes, and the lazy modifier updates the data when the cursor leaves the input field:

<input type="text" v-model.lazy="value">
Copy the code

2. .trim

Input box filter space at the beginning and end:

<input type="text" v-model.trim="value">
Copy the code

3. .number

If you enter a number first, you can only enter a number. If you enter a string first, you can only enter a number.

<input type="text" v-model.number="value">
Copy the code

2. Event modifiers

4. .stop

Event.stoppropagation () = event.stopPropagation()

<button @click.stop ="test">test</button>
Copy the code

5. .prevent

PreventDefault () = event.preventDefault() = event.preventDefault()

<a @click.prevent="test">test</a>
Copy the code

6. .self

Methods fire only when the element itself fires, that is, only when the element itself is clicked. For example, if a div has a button inside it, the div and the button both have events. If we click on the button, the div binding method will also fire. If we click on the div with self, it will fire only when we click on the div.

<div @click.self="test"></div>
Copy the code

7. .once

Events can only be used once, and no matter how many times they are clicked, they will never be executed again

<div @click.once="test"></div>
Copy the code

8. .capture

Use event capture mode when adding event listeners. You add a listener to an element that fires the element with that modifier when it bubbles. If there are more than one such modifier, it fires from the outside in.

9. .sync

Bidirectional binding of prop

10. .keyCode

Listen to the command of the key, you can see the corresponding table of the key code of vUE