Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the modifier of vue instruction". In daily operation, I believe that many people have doubts about what the modifier of vue instruction refers to. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "what does the modifier of vue instruction refer to?" Next, please follow the editor to study!

In vue, the modifier of an instruction is a full stop in English. A special suffix specified to indicate that an instruction should be bound in a special way; where ".passive" and ".passient" cannot be used together because ".passient" is ignored and the browser displays a warning.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the modifier of the vue instruction

The modifier (modifier) is in English full stop. A special suffix specified to indicate that an instruction should be bound in a special manner.

1. V-bind instruction modifier

1) camel

Because when you bind a feature, uppercase letters are converted to lowercase letters, such as

Therefore, Vue provides the v-bind modifier camel, which allows you to hump the v-bind attribute name when using the DOM template, such as the viewBox attribute of SVG.

2) prop

Is used to bind the DOM property (property).

V-bind is bound to the attribute of the DOM node by default, and when the .prop modifier is used, it is bound to property.

3) sync

2. Modifiers for v-on instructions

1) event modifier

-.stop to stop the event from bubbling

-.prevent blocks default events

-.capture enables event capture mode

-.self

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

Why use this modifier?

Even if an empty function is executed when the touch event is triggered, the page stutters. Because the browser doesn't know whether the listener will block the default event or not, the browser has to wait until the entire function is executed before deciding whether to scroll the page. The passive event listener allows developers to tell the browser that the listener will not block the default behavior, so that the browser can rest assured that the page can be scrolled boldly, which can greatly improve the performance of the mobile page, because according to statistics, only 20% of touch events will block the default event.

2) Button modifier

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

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

3) system modifier key

Unlike regular keys, when used with the keyup event, the modifier key must be pressed when the event is triggered, in other words, the keyup.ctrl can only be triggered if the other keys are released while holding down ctrl. Releasing ctrl alone does not trigger the event. If you want this behavior, switch to keyCode:keyup.17 for ctrl.

-.ctrl

-.alt

-.shift

-.meta

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

4) Mouse button modifier

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

-.left

-.right

-.middle

3. Modifiers for v-model

1) lazy

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

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

2) number

Automatically converts the user's input value to a numeric type.

3) trim

Automatically filter the first and last white space characters entered by the user.

-Note:

1. When using modifiers, order is important. The corresponding code is generated in the same order. therefore,

V-on:click.prevent.self blocks all clicks from the default event

V-on:click.self.prevent only blocks default events that are clicked on the element itself

two。 Do not use .passive with .passient, because .passient will be ignored and the browser may show you a warning.

At this point, the study of "what are the modifiers of vue instructions" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.