Hi, I’m Allyn.

In this series of articles, we will use questions and answers to master vUE development and make progress together. Welcome to discuss in the comments area

4 q

Interviewer: Tell me about a Vue modifier you’ve used

Candidate: Again? I mean, who doesn’t keep track of these things, but don’t I know to look them up when I really need them?

Interviewer: Huh?

Candidate: All right, I say.

Interviewer: That’s right. Although these essays seem meaningless, what I’m really testing is your familiarity with VUE. It’s impossible for someone who has really used VUE to develop several large projects to answer more than five questions.

Candidate: You’re right.

.

Solutions and Extensions:

In the previous article Vue100 asked (2-3 questions) in what situations will the.sync modifier be used? In, we introduced the.sync modifier. Which brings us to the question of this article. Tell me about vue modifiers you’ve used in your daily life.

If you use them well, you can be productive. If not for an interview, you should be able to master common qualifiers.

Custom component modifiers

.sync

Parent and child components interact. The parent component passes a prop value to the child component, which throws an event telling the parent to change the binding value, which can be abbreviated with the.sync modifier.

<children :value="fatherValue" @update:value="val => fatherValue = val"></children> this.emit ('update:value',  newValue)Copy the code

Is equivalent to

<children :value. Sync ="fatherValue"></children> this.$emit('update:value', newValue)Copy the code

To learn more about the.sync modifier, click here

.nativue

Native modifiers are added to custom component events to ensure that the custom component’s native events can be executed

< my-button@click ="handleClick"></ my-button@click. native="handleClick"></my-button>Copy the code

If you leave out the. Native modifier, @click is a custom event click, not a native event click. HandleClick will not execute unless a custom event click is emitted inside the my-Button component.

Event modifier

.stop

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

<div @click="handleDivClick">
  <button @click.stop="handleBtnClick">click</button>
</div>
Copy the code

A button is wrapped inside a div.

Without the.stop modifier, click on the button to execute handleBtnClick and then handleDivClick.

Add the.stop modifier to the button event, click on the button, and just do handleBtnClick.

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

.capture

The.capture modifier is used to add event listeners using event capture mode

<div @click.capture="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>
Copy the code

Div events without the.capture modifier, click button, execute handleBtnClick, and then handleDivClick, using bubble mode by default.

Add the.capture modifier to the event on the div, click button, execute handleDivClick, and then handleBtnClick.

.self

The.self modifier that fires the handler only if the event.target is the current element itself

<div @click.self="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>
Copy the code

Div events without the.self modifier, click button, execute handleBtnClick, then handleDivClick, and bubble by default.

Add the.self modifier to the event on the div. Click button to execute handleBtnClick only. Click div to execute handleDivClick.

.once

.once modifier, the click event will fire only once

<button @click.once="handleBtnClick">button</button>
Copy the code

Click button and the handleBtnClick event is executed only once. Click button again and the handleBtnClick event is not executed.

.prevent

.prevent prevents default events, same as event.preventDefault()

<a href="#" @click.prevent="handleClick"> </a> Prevent the checkbox from being checked <input type="checkbox" @click.prevent /> Prevent the form from being checked < EL-form :model="form" @submit.native. Prevent > <el-form-item label=" activity name "> < EL-input v-model="form.name"></el-input> </el-form-item> </el-form>Copy the code

Keyboard key modifier

Look up the VUE documentation when you need it, there are too many to remember.

Form input binding modifier

.lazy

The V-Model synchronizes the value of the input box with the data after each input event is triggered. Adding the.lazy modifier will synchronize after the change event

<input v-model.lazy="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...
Copy the code

.trim

Using the.trim modifier, the leading and trailing whitespace characters entered by the user are automatically filtered

<input v-model.trim="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...
Copy the code

.number

Using the.number modifier converts the user’s input value to a numeric type

<input v-model.number="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...
Copy the code

System modifier

This part of the peacetime development rarely used, like this knowledge point to know how to refer to the line, when used again, VUE document

conclusion

The proper use of vUE modifiers can make our code more concise and improve our development efficiency.

Outlined in this article the modifier almost can be used in development at ordinary times, if you develop a vue projects, but have not used these modifiers, either you’re not complex development of business, or the code you write concise enough, if you happened to resume wrote skillfully using the vue, so in the eyes of the interviewer is deducted.

React differs from VUE in that vue provides a lot of syntax candy and instructions for faster development. To be proficient with vUE, you need to familiarize yourself with these syntax candy and instructions.

I hope my vUE series of articles can help you on the front end of the road ~

The resources

14 Vue Modifiers interviewers Love to ask about