Vue provides developers with a number of modifiers. Today, let’s take a look at some commonly used modifiers.

Learning these modifiers greatly improves development efficiency.

  • @click.stop=”xxx”

  • @click.prevent=”xxx”

  • @keypress.enter=”xxx”

  • :money.sync=”total”

Stop the modifier

  • Preventing an event from spreading
  •   <a @click.stop='xxx'></a>
Copy the code

. Prevent modifier

  • Blocking default actions
  •   <from @submit.prevent="xxx"></from>
Copy the code

Enter the modifier

  • Keyreturn event
  •   <input @keyup.enter="xxx"></input>
Copy the code

The sync modifier

  • We know that it is not allowed for children of Vue to modify values passed by the parent.

  • You can only do this by changing the parent component and then rendering back to the child component.

  • This is how it is written:

  • // Parent component passes value to child component, <Child :money="total" v-on:updata:money="total = $event" /> // The child modifs the total passed by the parent and passes it to the parent via the $emit callback. {{money}}<button @click="$emit('update:money', money-100)"> <span>Copy the code

  • The code in the parent component above can be abbreviated as the code below

  •   <Child :money.sync="total" />
Copy the code

  • If.sync is used, remember that the first parameter update in $emit is required

Conclusion:

  • Four commonly used modifiers