1, What is a modifier

In the program world, a modifier is a symbol used to qualify types and declarations of type members

In Vue, the modifier handles many details of DOM events, so that we no longer need to spend a lot of time dealing with these troublesome things, but can focus more on the logical processing of the program

There are five types of modifiers in vue:

• Form modifier

• Event modifier

• Mouse button modifier

• Key modifier

• v-bind modifier

2, Function of modifier

Form modifier

When we fill in the form, we use the input tag most, and the instruction uses the v-model most

The form modifiers are as follows:

• lazy

• trim

• number

lazy

After we fill in the information and the cursor leaves the tag, we will assign the value to the value, that is, we will synchronize the information after the change event

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

trim

The first space character entered by the user is automatically filtered, and the middle space is not filtered

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

number

The user's input value is automatically converted to a numeric type, but if the value cannot be parsed by parseFloat, the original value will be returned

<input v-model.number="age" type="number">

Event modifier

Event modifiers are used to process event capture and target, including the following modifiers:

• stop

• prevent

• self

• once

• capture

• passive

• native

stop

Preventing event bubbling is equivalent to calling the event.stopPropagation method

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//Output only 1

prevent

Blocking the default behavior of the event is equivalent to calling the event.preventDefault method

<form v-on:submit.prevent="onSubmit"></form>

self

Only when   event.target   Is the handler that is triggered when the current element itself

<div v-on:click.self="doThat">...</div>

When using modifiers, order is important; The corresponding code will be generated in the same order. Therefore, use   v-on:click.prevent.self   Will block all clicks, and   v-on:click.self.prevent   Only clicks on the element itself are blocked

once

After the event is bound, it can only be triggered once, and will not be triggered the second time

<button @click.once="shout(1)">ok</button>

capture

Trigger the event from the top level containing this element down

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
//  Output structure:   one   two   four   three  

passive

On the mobile side, when we are listening for element scrolling events, the onscroll event will be triggered all the time, which will make our web page card. Therefore, when we use this modifier, it is equivalent to setting a. lazy modifier for the onscroll event

<!-- Default behavior for scrolling events (Rolling behavior) Will be triggered immediately -->
<!-- Without waiting `onScroll` complete  -->
<!-- This includes `event.preventDefault()` Situation -->
<div v-on:scroll.passive="onScroll">...</div>

Don't put  . passive   and  . prevent   Use together because  . prevent   Will be ignored and the browser may show you a warning.

passive   Will tell the browser that you don't want to block the default behavior of the event

native

Let the component listen to the native events of the root element like html built-in tags, otherwise it will be used on the component   v-on   Only custom events will be listened

<my-component v-on:click.native="doSomething"></my-component>

Using the. native modifier to manipulate ordinary HTML tags will invalidate the event

Mouse button modifier

The mouse button modifier refers to left, right and middle click, as follows:

• left click

• Right right right click

• Middle middle click

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

Keyboard modifier

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

There are many keycodes, but vue provides us with aliases, which are divided into the following two types:

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

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

//  It is triggered only when the key is keyCode
<input type="text" @keyup.keyCode="shout()">

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

Vue.config.keyCodes.f2 = 113

v-bind modifier

The v-bind modifier is mainly used to operate attributes, which are as follows:

• async

• prop

• camel

async

It can bind props in both directions

//Parent component
<comp :myMessage.sync="bar"></comp> 
//Subcomponents
this.$emit('update:myMessage',params);

The above method is equivalent to the following abbreviation

//Parent component
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//Subcomponent js
func2(){
  this.$emit('update:myMessage',params);
}

You should pay attention to the following two points when using async:

• When using sync, the format of the event name passed by the sub component must be update:value, where value must be exactly the same as the name declared in props in the sub component

• Note with  . sync   Modifier   v-bind   Cannot be used with expressions

• take   v-bind.sync   Used on a literal object, for example   V-bind. Sync = "{title: doc.title}" does not work properly

props

Set custom tag attributes to avoid exposing data and polluting HTML structure

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

camel

Change the naming to hump naming, such as converting the view box attribute name to   viewBox

<svg :viewBox="viewBox"></svg>

3, Application scenario

According to the function of each modifier, we can get the application scenarios of the following modifiers:

• . stop: prevent event bubbling

• . native: bind native events

• . once: the event executes only once

• . self: binding an event to itself is equivalent to preventing the event from bubbling

• . prevent: block default events

• . caption: for event capture

• . once: triggered only once

• . keyCode: monitor specific keyboard press

• . right: right click