Lazy Synchronization with .lazy

By default, v-model synchronizes the input value on every input event. To defer synchronization until the element loses focus or the change event fires, use the .lazy modifier:

<input v-model.lazy="message">

Numeric Type Conversion with .number

To automatically coerce user input in to a number (e.g., converting '42' to 42), apply the .number modifier. This is especially useful with <input type="number">:

<input v-model.number="userAge" type="number">

Whitespace Trimming with .trim

The .trim modifier strips leading and trailing whitespace from the input before assigning it to the bound property:

<div id="whitespace-handler">
  <input v-model.trim="cleanText">
  <p ref="display">{{ cleanText }}</p>
  <button @click="logValue">Log Value</button>
</div>

new Vue({
  el: '#whitespace-handler',
  data: {
    cleanText: ''
  },
  methods: {
    logValue() {
      console.log(this.$refs.display.textContent);
    }
  }
});

Event Modifiers for DOM Behavior Control

Vue provides shorthand modifiers to handle common DOM event behaviors without cluttering methods with event.preventDefault() or event.stopPropagation().

<!-- Prevents event bubbling -->
<button @click.stop="handleClick">Stop Propagation</button>

<!-- Prevents default form submission -->
<form @submit.prevent="handleSubmit"></form>

<!-- Chained modifiers: capture + stop -->
<div @click.capture.stop="handleRootClick">...</div>

<!-- Only triggers if event.target is the element itself -->
<div @click.self="handleSelfOnly">...</div>

<!-- Executes handler only once -->
<button @click.once="activateOnce">One-Time Action</button>

Order matters: @click.stop.prevent blocks all click propagation, while @click.prevent.stop first prevents default behavior then stops porpagation — though both usually yield identical practical results. Still, consistency in ordering improves readability and maintainability.

Keyboard Key Modifiers

Vue suppports key-based filtering for keyboard events using dot-notation modifiers. Instead of hardcoding keyCode, use semantic aliases:

<!-- Equivalent to @keyup.keyCode="13" -->
<input @keyup.enter="submitForm">

<!-- Tab, Escape, Arrow Keys, etc. -->
<input @keydown.tab="insertTab">
<input @keydown.esc="closeModal">
<input @keydown.up="moveUp">

Supported aliases include:

• .enter, .tab, .delete, .esc, .space
• .up, .down, .left, .right

System Key Modifiers

Combine system keys (Ctrl, Alt, Shift, Meta) with mouse or keyboard events to create context-aware interactions:

<!-- Activates only when Alt+C is pressed -->
<input @keyup.alt.c="clearAll">

<!-- Triggers only on Ctrl+click -->
<div @click.ctrl="openInNewTab">Open Link</div>

Important: For keyup handlers involving system keys, the modifier must still be held during key release. So @keyup.ctrl fires only when another key is released while Ctrl remains pressed. To detect standalone Ctrl release, use @keyup.17 (the keyCode for Ctrl) instead.