It is used to handle DOM events in Vue.

It prevents default browser behavior.

Vue v-on Directive - Learn VUEJS | Revochamp

Name: Vue v-on Directive
Availability: InStock
Author: Revochamp

What is v-on?

The v-on directive is used to listen to DOM events and execute methods when those events are triggered.

Basic Syntax

HTMLRead-only

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

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

Shorthand Syntax

HTMLRead-only

<button @click="handleClick">Click Me</button>

<button @click="handleClick">Click Me</button>

Inline Event Handling

HTMLRead-only

<button @click="count++">Increment</button>
<p>{{ count }}</p>

<button @click="count++">Increment</button>
<p>{{ count }}</p>

Passing Arguments

HTMLRead-only

<button @click="greet('John')">Greet</button>

<button @click="greet('John')">Greet</button>

Event Object

HTMLRead-only

<button @click="handleClick($event)">Click</button>

<button @click="handleClick($event)">Click</button>

Event Modifiers

Modifier	Description
.stop	Stops event propagation
.prevent	Prevents default action
.once	Runs only once
.capture	Uses capture mode
.self	Triggers only on element itself

Modifiers Example

HTMLRead-only

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

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

Keyboard Events

HTMLRead-only

<input @keyup.enter="submit">

<input @keyup.enter="submit">

Best Practices

Use shorthand @ for cleaner code
Keep logic inside methods
Use modifiers to simplify event handling
Avoid inline complex logic

Common Mistakes

Writing complex logic inline
Not using event modifiers
Forgetting $event when needed
Mixing methods and inline logic incorrectly

Conclusion

The v-on directive is essential for handling user interactions in Vue. It provides a clean and efficient way to manage events.

Modifier

Description

.stop

Stops event propagation

.prevent

Prevents default action

.once

Runs only once

.capture

Uses capture mode

.self

Triggers only on element itself

Vue v-on Directive

Vue v-on Directive

What is v-on?

Basic Syntax

Shorthand Syntax

Inline Event Handling

Passing Arguments

Event Object

Event Modifiers

Modifiers Example

Keyboard Events

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Vue v-on Directive

Vue v-on Directive

What is v-on?

Basic Syntax

Shorthand Syntax

Inline Event Handling

Passing Arguments

Event Object

Event Modifiers

Modifiers Example

Keyboard Events

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?