Vue Event Handling Explained — v-on and @ Directives

In this tutorial, you will learn about Vue Event Handling Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue event handling with v-on (@) provides declarative event binding with modifiers for common tasks like preventDefault, stopPropagation, and keyboard key detection.

What You'll Learn

• v-on syntax and shorthand
• Event modifiers (prevent, stop, capture)
• Key modifiers (enter, escape, exact)
• Method and inline handlers
• Custom events with emit

Why It Matters

Vue's event modifiers eliminate boilerplate code for common event scenarios, keeping templates clean and handlers focused on logic rather than browser event API manipulation.

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="name" @keyup.enter="handleSubmit" placeholder="Press Enter" />
      <button type="submit">Submit</button>
    </form>

    <div @click.self="closePanel" class="overlay">
      <div class="panel" @click.stop>
        <h2>Panel</h2>
        <button @click="closePanel">Close</button>
      </div>
    </div>

    <button @click.once="handleOnce">Click me once</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("");

function handleSubmit() {
  alert(`Submitted: ${name.value}`);
}

function closePanel() {
  alert("Panel closed");
}

function handleOnce() {
  alert("This fires only once!");
}
</script>

Expected output: Form prevents reload, Enter submits, overlay click.self ignores panel inner clicks, and once fires only the first click.