How do I access the native DOM event object?

If you call a method without parentheses `@click='handleClick'`, the event object is passed automatically. If you use parentheses `@click='handleClick(arg)'`, you can pass the event manually using the special `$event` variable: `@click='handleClick(arg, $event)'`.

HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

⚡ Total XP: 0|💻 vuejs XP: 0

Methods & Event Handling in Vue.js

Learn about Methods & Event Handling in this comprehensive Vue.js tutorial. Learn how to handle DOM events, use the @ shorthand, and leverage powerful event modifiers.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Respond to user actions with methods and event listeners.

1Listening to Events

Vue uses the v-on directive to listen to DOM events and run JavaScript when they're triggered. Because v-on is used so frequently, it has a dedicated shorthand: @. For example, v-on:click becomes @click.

2Methods in Composition API

In the Composition API (<script setup>), a method is simply a standard JavaScript function. You don't need a special methods object like in the Options API. Just write function doWork() {} and call it in your template.

3Event Modifiers

Calling event.preventDefault() or event.stopPropagation() is extremely common. Vue provides modifiers like .prevent and .stop directly in the template (@click.stop) so your JavaScript functions don't have to deal with DOM event details.