preface
- This article is dedicated to introduce the modifier of vue
- Including instruction modifier, event modifier, key modifier and other modifiers
- Understand the commonly used modifiers to make the development of some scenes easier
Modifier of instruction
Introduction: the modifier of the instruction includes the modifier of v-model and the modifier of v-bind. These are some commonly used modifiers, which are convenient for our normal development
-
Modifier of v-model
There are three types of modifiers for v-model,. lazy,.trim,.number- .lazy
After the. lazy modifier is added to the v-model, the input content will not be displayed until the input box loses focus or the enter key is pressed
<template> <input v-model.lazy="demoText" type="text"/> <h1>{{ demoText }}</h1> </template>
- .trim
The. Trim modifier will remove the leading and trailing spaces of the two-way bound content, which is consistent with the effect of the string trim method. If you keep inputting the space button, the bound value will always be '' (empty string), and the space in the middle cannot be cleared.
<template> // If you enter demoText as' abc ', it will be displayed as: abc // If you enter demoText as' a bc ', it will be displayed as: a bc <input v-model.trim="demoText" type="text"/> <h1>{{ demoText }}</h1> </template>- .number
After the. Number modifier is added to the v-model, the input value will be converted from string or other types to number type
<template> // If you enter demoText as' ', typeText is string // If you enter demoText as' 123 ', typeText is number <input v-model.number="demoText" type="text"/> <h1> {{ typeText }} </h1> </template> <script> import { defineComponent ,ref ,computed} from 'vue' export default defineComponent({ setup(){ let demoText = ref('') let typeText = computed(()=>{ return typeof demoText.value }) return { demoText, typeText } } }) <script> -
Modifier of v-bind
The common modifier for v-bind is. sync- .sync
Add. sync after the attribute name of v-bind. You can realize the two-way data binding of parent and child components through $emit('update: attribute name ', value)
<template> <div class="demo"> /* The actual extension is: <child-comp :label="label" @update:label="val => label = val" /> */ <child-comp :label.sync="label" /> <div>{{ label }}</div> </div> </template> // childComp.vue <template> <div class="demoChild"> <button @click="$emit('update:label','Modify parent component label')"> modify </button> </div> </template>When you click the button of childComp.vue, the label of the parent component will be changed to modify the label of the parent component
Note that vue3.0 has removed the. sync modifier and fused it with the v-model
Event modifier
Introduction: modifiers designed for event behavior, such as stopPropagation() [prevent bubbling], preventDefault() [prevent default behavior], etc
- stop – > event. Stoppropagation() prevents event bubbling
<!-- Prevent click events from bubbling when clicked box2 Will not trigger when box1 Click event of. If it is not added, it will be triggered --> <div class="box1" @click="btn"> <div class="box2" @click.stop="btn1"></div> </div>
- Prevent - > event. Preventdefault(), prevent the default behavior of the event
<!-- Submitting events no longer reloads the page --> <form v-on:submit.prevent="onSubmit"></form>
- capture – > to implement the mechanism for capturing trigger events
<!-- When adding an event listener, use the event capture mode to execute the outer box event first, and then the inner box event --> <div v-on:click.capture="toDo">...</div>
- self – > the implementation will trigger the event handler only when the current element is clicked (it will only prevent the bubbling behavior on itself, not the real bubbling)
<!-- The event is executed only when the element itself (not the child element) --> <div v-on:click.self="toDo">...</div>
- Once – > the handler is triggered only once
<button v-on:click.once="toDo"></button>
- Passive – > corresponds to the passive option in addEventListener; Indicates that it will not block the default behavior of events (generally speaking, the default behavior of scrolling the page is blocked, and the page must remain stationary, but the browser cannot know in advance whether a listener will call preventDefault() , the default behavior can only be executed after the rolling listener is executed, and the listener execution is time-consuming, and 80% of the rolling listeners will not prevent the default behavior, so the browser is white, and the passive listener is born, which can execute the JavaScript code in the listener and the default behavior of the browser in two threads at the same time.)
<!-- 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>
The. passive modifier can especially improve the performance of the mobile terminal
Do not use. passive with. prevent because. prevent will be ignored and the browser may show you a warning. passive will tell the browser that you do not want to block the default behavior of the event
- Tips for event modifiers
<!-- Modifiers can be concatenated to prevent default events --> <a v-on:click.stop.prevent="toDo"></a> <!-- Only modifiers --> <form v-on:submit.prevent></form>
Modifier of key
Introduction: specify the trigger method of the event through the keyboard or mouse buttons (since keyCode is obsolete in Vue3.0 and is not supported in some higher version browsers, this article does not introduce the form of keyCode)
- enter key
- tab
- Delete (capture delete and backspace keys)
- esc
- space
- up
- down
- Left (left button if mouse)
- Right (right if it is the mouse)
- ctrl
- alt
- shift
- Meta (a special key on the MIT computer keyboard)
- Middle (middle wheel key of the mouse)
Example:
```
//Press enter to trigger the search method
Supplementary modifier
Introduction: describes the. exact modifier and. native modifier
- . exact modifier
Function: accurately control the button that triggers the event
//The search method can only be triggered by pressing the Enter key. If alt + enter is pressed at the same time, the < input type = "text" v-on: Keyup. Enter. Exact = "search" / > will not be triggered
- . native modifier
Function: bind the native event to the component, and the component will listen to the native event of the root element like the html built-in tag. Otherwise, using v-on on the component will only listen to custom events
```
/*
It is often used in a pure icon component to bind an event
*/
<comp @click.native="consoleDetails" />
comp.vue
<div>
<img src="xxx">
</div>
```
Note: in vue3.0, the. native modifier is also discarded. If you need a method that reaches the. native modifier, you cannot register the method bound on the component label in the emits option (or define emits ([])