v-on directive for events in Vue - Step-by-Step Execution

Concept Flow - v-on directive for events

User action triggers event

↓

v-on directive listens

↓

Event handler function runs

↓

Component state or output updates

↓

DOM re-renders if needed

↓

User sees updated UI

The v-on directive listens for user events, runs a handler function, updates state, and refreshes the UI.

Execution Sample

Vue

<template>
  <button v-on:click="increment">Click me</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

A button uses v-on:click to run increment, increasing count and updating the displayed number.

Execution Table

Step	Event Triggered	State Before	Handler Action	State After	UI Update
1	No event yet	count = 0	No action	count = 0	Shows 'Count: 0'
2	User clicks button	count = 0	increment() runs, count++	count = 1	Shows 'Count: 1'
3	User clicks button again	count = 1	increment() runs, count++	count = 2	Shows 'Count: 2'
4	No further clicks	count = 2	No action	count = 2	Shows 'Count: 2'

💡 No more events, so no handler runs and UI stays at count 2

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	0	1	2	2

Key Moments - 3 Insights

Why doesn't the count change until I click the button?

Because the v-on directive only runs the handler when the event (click) happens, as shown in steps 2 and 3 of the execution_table.

What happens if I write @click instead of v-on:click?

They are the same; @click is shorthand for v-on:click, so the behavior and execution flow remain identical.

Why does the UI update after the handler runs?

Vue tracks reactive variables like count.value; when increment changes it, Vue re-renders the template to show the new count, as seen in the UI Update column.

Visual Quiz - 3 Questions

Look at the execution_table, what is count.value after the first click event?

A 1

B 0

C 2

D undefined

💡 Hint

Check the 'State After' column at Step 2 in the execution_table.

At which step does the UI show 'Count: 2'?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'UI Update' column in the execution_table for when count reaches 2.

If the user never clicks the button, what will the UI show?

A 'Count: 2'

B 'Count: 1'

C 'Count: 0'

D Nothing

💡 Hint

Refer to Step 1 in the execution_table where no event has occurred yet.

Concept Snapshot

v-on directive listens for events like clicks
Syntax: v-on:event="handler" or shorthand @event="handler"
When event fires, handler runs and can update reactive state
Vue re-renders UI automatically on state change
Use for buttons, inputs, and other user actions

Full Transcript

The v-on directive in Vue listens for user events such as clicks. When the user clicks the button, the event triggers the handler function increment, which increases the reactive count variable. Vue detects this change and updates the displayed count in the UI. The flow starts with the user action, then the directive listens, runs the handler, updates state, and finally re-renders the UI. Without clicks, the count stays at zero and the UI shows 'Count: 0'. The shorthand @click is equivalent to v-on:click. This reactive event handling lets Vue apps respond instantly to user input.