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