Event modifier

.stop: prevents event bubblers, equivalent to calling the event.stopPropagation() method

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

.prevent: Prevent default actions, such as form submission, a TAB jump, etc

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

.self: Only clicking on the element itself will trigger. For example, if a div has a button inside it, both div and button have events. If we click on the button, the div binding method will also fire. If the div’s click and self are clicked, it will fire only when the div is clicked.

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

.once: An event can only be triggered once, no matter how many times it is clicked

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

.captrue: Capture bubbles, that is, when bubbles occur, the DOM elements with the modifier are executed first, and if there are more than one, from the outside in, and then the triggered events are executed in the natural order.

<div id="obj1" @click="doc">
    <div id="obj2" @click.capture="doc">
          <div id="obj3" @click.capture="doc">
              <div id="obj4" @click="doc">
                <! -- When you click on obj4, the order will be obj2, obj3, obj4, and obj1. Because 2 has the.captrue modifier, the event fires first, from outside to inside, then 4 itself fires, and finally the bubbling event. -->
            </div>
          </div>
     </div>
</div>
Copy the code

V – model modifier

.lazy: By default, v-model synchronizes the values and data of the input box. You can use this modifier to move the cursor out of the input box and resynchronize data

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

. Number: automatically converts user input values to numeric types

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

. Trim: Filters the Spaces at the beginning and end of the input box

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

Keyboard modifier

Vue provides aliases for most commonly used keycodes

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

Custom keyboard modifiers

<input type="text" placeholder="Press F5" @keyup.f5="handle" />
Copy the code