v-on (@) Event Listener Directive
Last updated: 2026-10-22
v-on (@) Event Listener Directive
v-on attaches an event listener, shorthand @. Modifiers like .stop, .prevent or .once customize behaviour.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<button v-on:click="count++">+1</button>
<button @click="greet">Greet</button>
<form @submit.prevent="onSubmit">⚙️ Arguments
| expression | Event name plus a handler or inline statement; modifiers like .stop, .prevent, .once, .self |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Clicked 0 times'; each click increments the counter.💡 Key Points
💡 Tip @ is shorthand for v-on: — everyday code uses @click.
ℹ️ Note Common modifiers: .stop, .prevent, .once and .self.
⚠️ Warning Pass the method name without parentheses (@click="greet"); add them only to pass arguments.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference between @click="fn" and @click="fn()"?
A The former passes the event object automatically; parentheses are for passing custom arguments.
Q Can modifiers be chained?
A Yes, e.g. @click.stop.prevent — applied left to right.
Q How to listen for keyboard events?
A Use key modifiers like @keyup.enter or @keydown.esc.
