Vue v-on Directive

Vue Tutorial

🎯 Vue v-on Directive

In Vue.js, the Vue v-on Directive is used to listen to DOM events and execute methods when those events occur.

 What is Vue v-on Directive?

v-on attaches an event listener to an HTML element.

<button v-on:click="sayHello">Click Me</button>

✔ When the button is clicked, sayHello() runs.

 Basic Syntax

v-on:event="method"

✔ Shorthand (Most Used)

@event="method"

Example:

<button @click="sayHello">Click</button>

 Example 1: Click Event


 

 Example 2: Calling a Method

<button @click="greet">Greet</button>
methods: {
greet() {
alert("Welcome to Vue")
}
}

 Example 3: Passing Arguments

<button @click="sayHello('Sanjit')">Say Hello</button>
methods: {
sayHello(name) {
alert("Hello " + name)
}
}

 Example 4: Accessing Event Object ($event)

<button @click="logEvent($event)">Click</button>
methods: {
logEvent(event) {
console.log(event.type)
}
}

 Event Modifiers

Vue provides modifiers to simplify common event tasks.

Modifier Purpose
.prevent Prevent default behavior
.stop Stop event propagation
.once Run event only once
.self Trigger only on element itself

Example

<form @submit.prevent="submitForm">
<button type="submit">Submit</button>
</form>

 Keyboard Events

<input @keyup.enter="submit">
<input @keyup.esc="cancel">

Common Key Modifiers

  • .enter

  • .tab

  • .esc

  • .space

  • .up, .down

 Mouse Event Modifiers

<button @click.right="rightClick">Right Click</button>
<button @click.middle="middleClick">Middle Click</button>

 Multiple Events on One Element

<input
@focus="onFocus"
@blur="onBlur"
/>

v-on with Components (Custom Events)

<child-component @save="saveData" />
this.$emit('save')

📌 Used for child → parent communication.

 Commonly Used v-on Events

  • @click

  • @submit

  • @input

  • @change

  • @keyup

  • @keydown

  • @mouseover

  • @mouseleave

 Best Practices ✅

✔ Use shorthand @
✔ Keep logic inside methods
✔ Use modifiers instead of event.preventDefault()
✔ Name methods clearly

 Summary Table

Task Syntax
Click @click="method"
Submit @submit.prevent="method"
Keyboard @keyup.enter="method"
One-time @click.once="method"
Custom event @eventName="method"

 Conclusion

The v-on directive is the backbone of interactivity in Vue.
Mastering v-on is essential before moving to forms, components, and advanced UI logic.

You may also like...