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

This article mainly introduces what the commonly used modifiers in Vue have related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will get something after reading this Vue commonly used modifiers, let's take a look at it.

Interviewer: tell me about the Vue modifiers you usually use

Candidate: again? Who does not usually remember these ah, when I really need to use it, I do not know to check the documents? [related recommendation: vue.js video tutorial]

Interviewer: hmm?

Candidate: all right, I'll say.

Interviewer: that's right. Although it seems meaningless to take these eight-part essays, I'm actually looking at your familiarity with vue. It's impossible for people who have really developed several large-scale projects with vue not to answer more than 5.

Candidate: you are all right.

...

Answer and extension:

In the previous article, "how to use v-model in custom components?" In talking about the usage scenarios of .sync modifiers, we introduced the .sync modifiers. This leads to the question of this article, talking about the vue modifiers you usually use.

If modifiers are used well, we should master commonly used modifiers, even if we are not dealing with an interview.

Custom component modifier

.sync

The parent component interacts, the parent component passes the prop value to the child component, and the child component throws an event to notify the parent component to change the binding value, which can be abbreviated with the .sync modifier.

This.$emit ('update:value', newValue) in the child component of the parent component

Equivalent to

This.$emit ('update:value', newValue) in the child component of the parent component

.nativue

The .native modifier is added to the events of the custom component to ensure that the native events of the custom component can be executed

If you can't execute it, you can execute it.

If you don't write the .native modifier, the @ click above is the custom event click, not the native event click, and the handleClick method will not execute unless the custom event click is emit inside the my-button component.

Event modifier

.stop

The .stop modifier, used to prevent bubbling, is the same as event.stopPropagation ()

Click

A div contains a button.

Events on button do not have a .stop modifier, click button, execute handleBtnClick first, and then execute handleDivClick.

Events on button are appended with a .stop modifier, click button, and only execute handleBtnClick.

To learn about event bubbling and capture, please click here for an almost compulsory interview.

.capture

.capture modifier to use event capture mode when adding event listeners

Click

Events on div do not add the .capture modifier, click button, execute handleBtnClick first, and then execute handleDivClick, which is the default bubble mode.

Events on div are appended with the .capture modifier, click button, execute handleDivClick first, and then execute handleBtnClick.

.self

.self modifier, which triggers the handler only if event.target is the current element itself

Click

Events on div do not add a .self modifier, click button, execute handleBtnClick first, and then execute handleDivClick, which is the default bubble mode.

Events on div are appended with the .self modifier, click button, execute handleBtnClick only, click div, and then execute handleDivClick.

.once

.once modifier, the click event will be triggered only once

Button

Events on button are modified. once, click button, execute the handleBtnClick event only once, and then click again, the handleBtnClick event will not be executed.

.prevent

.events block the default event, as with event.preventDefault ()

Prevent the jump behavior of the a tag click to prevent the check box from being checked to prevent form form submission from refreshing the page problem

Keyboard button modifier

Check the vue documentation when you need it. It's too much to remember.

Form input binding modifier

.lazy

V-model synchronizes the value of the input box with the data after each input event is triggered. Add the .synchronization modifier, which synchronizes after the change event

{{value}}

/ /... data () {return {value: 'lin'}} / /.

.trim

Using the .trim modifier, the white space characters entered by the user are automatically filtered

{{value}}

/ /... data () {return {value: 'lin'}} / /.

.number

Using the .number modifier, the user's input value is converted to a numeric type

{{value}}

/ /... data () {return {value: 'lin'}} / /. This is the end of the article on "what modifiers are commonly used in Vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "what modifiers are commonly used in Vue". If you want to learn more, you are welcome to follow the industry information channel.

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.