Event modifier

Calling event.preventDefault() or event.stopPropagation() in the event handler is a very common requirement. While this could easily be done in a method, it’s better if the method has pure data logic instead of dealing with DOM event details.

To solve this problem, vue.js provides event modifiers for V-Ons.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<! -- Prevent the click event from propagating --><a v-on:click.stop="doThis"></a><! Submit events no longer reload the page --><form v-on:submit.prevent="onSubmit"></form><! -- modifiers can be concatenated --><a v-on:click.stop.prevent="doThat"></a><! -- only modifiers --><form v-on:submit.prevent></form><! -- Use event capture mode when adding event listeners --> <! Events triggered by an inner element are processed here before they are processed by the inner element.<div v-on:click.capture="doThis">.</div><! Trigger handler only if event.target is the current element itself --> <! -- that is, events are not triggered from internal elements --><div v-on:click.self="doThat">.</div>
Copy the code

Key modifier

When listening for keyboard events, we often need to check for detailed keystrokes. Vue allows v-ONS to add key modifiers when listening for keyboard events:

<! Only in -`key` 是 `Enter`Called when the`vm.submit()` -->
<input v-on:keyup.enter="submit">
Copy the code

The key code

Using keyCode attributes is also allowed:

<input v-on:keyup13.="submit">
Copy the code

To support older browsers if necessary, Vue provides aliases for most commonly used keycodes:

  • .enter
  • .tab
  • .delete (capture the delete and backspace keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

The sync modifier

In some cases, we may need to “bidirectional bind” a prop. Unfortunately, true bidirectional binding creates maintenance problems, because child components can change parent components with no obvious source of change on either side.

Vue rules:

  • Components cannot be modifiedpropsExternal data
  • this.$emitCan trigger events and pass parameters
  • $eventYou can get$emitThe parameters of the

Example: The father (parent component) gives money to the son, and the son (child component) spends money. How to do it: The son calls (triggers) and asks his dad for money.

As shown in the figure: Click the “spend money” button in the child component. In order to realize the simultaneous change of money in the parent component and the child component, the data needs to be transferred from the parent component to the child component, and then the child component operates on this data. However, according to the Vue rules, the child component cannot directly operate on the data of the parent component$emitand$event. The concrete implementation is as follows:

// Parent component app.vue
<template>
  <div class="app">App.vue I now have {{total}}<hr>
    <Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

// Omit the CSS part
Copy the code
// Child component child.vue
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>To spend money</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]};</script>

// Omit the CSS part
Copy the code

Through the above model to achieve the change of money. For convenience, Vue provides an abbreviation for this pattern, the.sync modifier. So, the code in app. vue could be written as:

<template>
  <div class="app">App.vue I now have {{total}}<hr>
    <Child :money.sync="total"/>
  </div>
</template>
Copy the code

That’s how the.sync modifier is used.

Reference for this article: vue.js tutorial