What are modifiers of vue directives

In vue, the modifier of the instruction is a special suffix indicated by the English period ".", which is used to indicate that an instruction should be bound in a special way; among them, ".passive" and ".prevent" cannot be together Used because ".prevent" will be ignored when used together and the browser will display a warning.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What are the modifiers of the vue directive?

Modifier (modifier) ​​is a special suffix indicated by an English period. It is used to indicate that a directive should be bound in a special way.

1. v-bind command modifier

1) camel

Due to the binding feature, uppercase letters will be converted into lowercase letters, such as

So, Vue provides the v-bind modifier camel, which allows the v-bind attribute name to be camelized when using the DOM template, for example SVG’s viewBox attribute.

2) prop

is used to bind DOM attributes (property).

v-bind is bound to the attribute of the DOM node by default. After using the .prop modifier, it will be bound to the property.

##3) sync

2. Modifiers of the v-on command

1) Event modifier

- .stop prevents events from bubbling

#- .prevent Prevent the default event

#- .capture Turn on event capture mode

#- .self

The callback is only triggered when the event is triggered from the element itself to which the listener is bound (triggered only by clicking on itself, not bubbling).

Why use this modifier?

Even if an empty function is executed when a touch event is triggered, the page will freeze. Because the browser does not know whether the listener will block the default event, the browser cannot decide whether to scroll the page until the entire function is executed. The passive event listener allows developers to tell the browser that the listener will not prevent the default behavior, so that the browser can scroll the page safely and boldly. This can greatly improve the performance of the mobile page, because according to statistics, only 20% of touch events Default events are blocked.

2) Key modifier

When listening to keyboard events, we often need to check detailed keystrokes. Vue allows adding key modifiers to v-on when listening for keyboard events.

Website: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values.

3) System modifier keys

Modifier keys are different from regular keys. When used together with the keyup event, the modifier key must be pressed when the event is triggered. In other words, the modifier key must be pressed when the event is triggered. Only by releasing other keys under ctrl can keyup.ctrl be triggered. Simply releasing ctrl will not trigger the event. If you want this behavior, use keyCode for ctrl instead: keyup.17.

- .ctrl

- .alt

- .shift

- .meta

- exact (allows you to control by exact Events triggered by a combination of system modifiers)

4) Mouse button modifier

The execution function will only be processed when a specific mouse button is clicked. (2.2.0)

- .left

- .right

- .middle

3. Modifier of v-model

1) lazy

When the change event is not triggered, the data will not be updated.

By default, v-model synchronizes the value of the input box with the data after each input event is triggered. If you want to use change event synchronization, you can add the lazy modifier.

2) number

automatically converts the user's input value into a numerical type.

3) trim

Automatically filters the first and last blank characters entered by the user.

-----Note:

1. When using modifiers, the order is important. Corresponding codes will be generated in the same order. Therefore,

v-on:click.prevent.self will prevent all click default events

v-on:click.self.prevent will only prevent the default event of clicks on the element itself

2. Do not use .passive and .prevent together because .prevent will be ignored and the browser may show you a warning.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What are modifiers of vue directives. For more information, please follow other related articles on the PHP Chinese website!