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

In this article Xiaobian for you to introduce in detail "what are the problems of Vue modifiers", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the problems of Vue modifiers" can help you solve your doubts? let's follow the editor's way of thinking to learn new knowledge.

1.lazy

The function of the lazy modifier is that the value does not change when the value of the input box is changed, and the value value of the v-model binding will only change when the cursor leaves the input box.

{{value}} data () {return {value: "111111"}} 2.trim

The trim modifier acts like the trim () method in JavaScript, filtering out the leading and trailing spaces of the values bound by v-model.

{{value}} data () {return {value: "111111"}} 3.number

The function of the number modifier is to convert a value to a number, but entering a string first and entering a number first are two cases

{{value}} data () {return {value: "111111"}}

If you enter the number first, only take the previous number.

If you enter a letter first, the number modifier is invalid

4.stop

The function of the stop modifier is to prevent bubbling

Click methods: {clickEvent (num) {/ / No stop Click button output 1 2 / / add stop click button output 1 console.log (num)}} 5.capture

The event is bubbling from inside to outside by default, and the function of the capture modifier is in turn, captured by the outside network and inside the network.

Click methods: {clickEvent (num) {/ / No capture Click button output 1 2 / / add capture click button output 2 1 console.log (num)}} 6.self

The self modifier is that only the click event binding itself triggers the event

Click methods: {clickEvent (num) {/ / No self Click button output 1 2 / / add self click button output 1 Click div to output 2 console.log (num)} 7.once

The once modifier is used to execute the event only once

Click methods: {clickEvent (num) {/ / without once multiple-click button output 1 / / multiple-click button with once will only output 1 console.log (num)}} 8.prevent

The prevent modifier is used to prevent default events (such as the jump of the a tag)

Click me methods: {clickEvent (num) {/ / without prevent click on a tag to jump and then output 1 / / add prevent click on a tag will not jump will only output 1 console.log (num)}} 9.native

The native modifier is added to the event of a custom component to ensure that the event can be executed

Can't execute it.

Can be executed

10.left,right,middle

These three modifiers are events triggered by pressing the left, middle and right buttons of the mouse

Click methods: {/ / Click the middle button to output 1 / / Click the left button to output 2 / / right click to output 3 clickEvent (num) {console.log (num)}} 11.passive

When we listen for the element scrolling event, we will always trigger the onscroll event, which is fine on the PC side, but on the mobile side, it will make our web page change cards, so when we use this modifier, we are equivalent to giving the onscroll event a .modifier.

... 12.camel

If you don't add camel viewBox, it will be recognized as viewbox. If you add canmel viewBox, it will be recognized as viewBox12.sync.

When the parent component passes a value into the child component, and the child component wants to change the value, you can do this

In the parent component

In the sub-component

This.$emit ("update:foo", newValue)

The purpose of the sync modifier is that it can be abbreviated:

In the parent component

In the sub-component

This.$emit ("update:foo", newValue) 13.keyCode

When we write the event in this way, the event will be triggered no matter what button we press.

So what if you want to limit it to a button trigger? This is when the keyCode modifier comes in handy.

KeyCode provided by Vue:

/ / ordinary key. Enter .tab.delete / / (capture delete and backspace keys). Space.esc.up.down.left.right// system modifier key. Ctrl.alt.meta.shift

For example:

Press ctrl to trigger

You can also use mouse events + buttons.

Can be triggered by multiple buttons, such as ctrl + 67

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.