On the first day of 2023, let’s talk about what modifiers are commonly used in Vue?

1. The role of modifiers

Modifiers in vue can help us deal with the details of many DOM events, saving more events to focus on business logic

2. Classification

The modifiers I understand are roughly as follows:

1. Event modifiers

2. Mouse button modifiers

3. Form modifiers

4. v-bind modifier

5. Keyboard Modifiers

Event modifiers:

event.stopPropagation(1) stop is used to prevent event bubbling, which is equivalent to calling the method in native Js

(2) prevent is the default behavior to prevent events, which is equivalent to calling event.preventDefaultthe method

(3) once means that the event can only be triggered once,

(4) self event.targettriggers the processing function only when it is the current element itself

Note: The order of use will have different effects, @click.prevent.self will prevent all click events, @click.self.prevent will only prevent clicks on the element itself

(5) native is to turn the event on the component into a native event on the html sticky note

(6) The role of passive is equivalent to onscrolladding a .lazymodifier to the event to do lazy loading, because on the mobile side, when we are listening to element scrolling events, onscrollevents will always be triggered to make the web page become stuck

(7) capture is triggered when the event is triggered, starting from the top layer containing the event and triggering downwards

Mouse button modifiers:

(1) left left click

(2) right right click

(3) middle middle click

Form modifiers:

(1) lazy is equivalent to lazy loading. When the v-model is bound to data, the value will change in real time. The function of lazy is to wait for the cursor to leave, and then synchronize the data after the change event

(2) trim clears the first space, and the middle space will not be cleared

(3)number automatically converts the input value to a numeric type

Modifiers for v-bind:

(1) sync is also two-way binding data

The specific use is as follows:

// parent component

<parent component: info.sync="1"></parent component>

//Subassembly

this.$emit('update:info',1);

It is consistent with the following writing:

// parent component

<parent component:info="infromation" @update:info="1"></parent component>

//Subassembly

function1() {  

this.$emit('update:info',1);

}

Notice:

• syncWhen used , the format of the event name passed by the subcomponent must be , which must be exactly the same as the name declared in the subcomponentupdate:valuevalueprops

• .syncModifiers v-bind cannot be used with expressions

(2)prop Set custom tag attributes to avoid exposing data and preventing pollution of HTML structure

<input id="uid" title="title1" value="1" :index.prop="index">

(3) camel changes the naming to camel case,

For example, my-Boxconvert the attribute name tomyBox

Keyboard modifiers:

Keyboard modifiers are used to modify keyboard events ( onkeyup, onkeydown)

• Common keys (enter, tab, delete, space, esc, up...)

• System modifier keys (ctrl, alt, meta, shift...)

// Only trigger when the key is keyCode

<input type="text" @keyup.enter="">

You can also customize some global keyboard code aliases in the following ways

Vue.config.keyCodes.f2=113