What is v-on used for?
v-on is a Vue directive used to bind event handlers to elements or components.
In simple terms:
v-onlets you "listen" for events (click, input, submit, keyup, etc.) and call Vue methods or expressions.
The main purpose of v-on
1. Handling DOM events
javascript
<button v-on:click="increment">+</button>Shorthand:
javascript
<button @click="increment">+</button>2. Passing arguments to methods
javascript
<button @click="sayHello('Vue')">Click</button>And the method:
javascript
methods: {
sayHello(name) {
console.log(`Hello, ${name}`);
}
}3. Using inline expressions
javascript
<button @click="count++">+</button>4. Event modifiers
Modifiers refine the event's behavior:
Controlling propagation and default behavior
javascript
<button @click.stop="doSomething"></button>
<button @click.prevent="submit"></button>
<button @click.stop.prevent="mixed"></button>.stop→event.stopPropagation().prevent→event.preventDefault()
Running once
javascript
<button @click.once="init"></button>Triggering only on the element itself (not on children)
javascript
<button @click.self="onSelf"></button>Working with the keyboard
javascript
<input @keyup.enter="send">Vue understands:
- enter
- tab
- esc
- space
- up/down/left/right
- ctrl, shift, alt, meta
The .capture modifier
javascript
<button @click.capture="handle">...</button>Listens for the event during the capture phase, not the bubble phase.
The .passive modifier
Used for optimizing scroll handlers:
javascript
<div @scroll.passive="handleScroll"></div>5. Listening to a component's custom events
javascript
<MyButton @click="submit"/>If the component emits:
javascript
this.$emit('click')6. Dynamic event name
javascript
<button v-on:[eventName]="handler">Press</button>javascript
eventName = "dblclick"Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.