Inline and Method Handlers

const count = ref(0)

function greet(event) {
  alert('Hello World!')
  console.log(event)
}

function say(message) {
  alert(message)
}

function warn(message, event) {
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

<!-- `greet` is the name of the method defined above -->
<button @click="greet">Greet</button>

<button @click="say('hello')">Say hello</button>


<!-- using $event special variable -->
<!-- using inline arrow function -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

Event Modifiers

These are special suffixes added to event listeners using v-on (or the shorthand @) to tweak how events are handled. These modifiers help simplify the code by eliminating the need to manually call methods like event.preventDefault() or event.stopPropagation().

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form @submit.prevent></form>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>

<!-- use capture mode when adding the event listener     -->
<!-- i.e. an event targeting an inner element is handled -->
<!-- here before being handled by that element           -->
<div @click.capture="doThis">...</div>

<!-- the click event will be triggered at most once -->
<a @click.once="doThis"></a>

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete  -->
<!-- in case it contains `event.preventDefault()`                -->
<div @scroll.passive="onScroll">...</div>

Key Modifiers

These modifiers allow you to easily respond to specific keys when listening to keyboard events like @keydown, @keyup, or @keypress.

• .enter
• .tab
• .delete (captures both «Delete» and «Backspace» keys)
• .esc
• .space
• .up
• .down
• .left
• .right

<!-- only call `submit` when the `key` is `Enter` -->
<input @keyup.enter="submit" />

<!-- Use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case. -->
<input @keyup.page-down="onPageDown" />

System Modifier Keys

These are used to detect when modifier keys (like Ctrl, Alt, Shift, or Meta) are pressed during an event — especially useful with keyboard and mouse events.

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>

Mouse Button Modifiers

These modifiers only work with @mousedown and @mouseup events — not @click.

• .left
• .right
• .middle

<!-- Left mouse button (default behavior) -->
<div @mousedown.left="handleLeftClick">Left Click</div>

<!-- Middle mouse button -->
<div @mousedown.middle="handleMiddleClick">Middle Click</div>

<!-- Right mouse button -->
<div @mousedown.right="handleRightClick">Right Click</div>

<!-- Prevents right click (contextual menu) on some element -->
<div @mousedown.right.prevent="handleRightClick">Right Click (no menu)</div>

References

• https://vuejs.org/guide/essentials/event-handling.html