Why event handling matters in Vue - See It in Action

Why event handling matters

📖 Scenario: You are building a simple interactive webpage where users can click a button to increase a counter. This helps understand how Vue listens and reacts to user actions.

🎯 Goal: Create a Vue component that shows a number and a button. When the button is clicked, the number increases by one. This demonstrates why event handling is important to make web pages interactive.

📋 What You'll Learn

Use Vue 3.4+ with Composition API and <script setup>

Create a reactive counter variable

Add a button with a click event handler

Update the counter when the button is clicked

Display the current counter value

💡 Why This Matters

🌍 Real World

Event handling is how websites respond to user actions like clicks, taps, or key presses. This is essential for interactive features like buttons, forms, and games.

💼 Career

Understanding event handling is a core skill for frontend developers working with Vue or any modern web framework to build responsive user interfaces.

1

Set up the counter variable

In a Vue component with <script setup>, import ref from 'vue' and create a reactive variable called counter initialized to 0.

Vue

// Create a reactive variable called counter and set it to 0
// Your code here

Need a hint?

Use ref(0) to create a reactive number variable.

2

Add a button to trigger events

Inside the <template>, add a <button> element with the text Click me. This button will later handle clicks.

Vue

import { ref } from 'vue'
const counter = ref(0)



  
  

Need a hint?

Use a simple <button> tag with the text inside.

3

Add event handling to update counter

Add a @click event handler to the <button> that increases the counter.value by 1 when clicked.

Vue

import { ref } from 'vue'
const counter = ref(0)



  
  
  Click me

Need a hint?

Use @click="counter.value++" on the button to handle clicks.

4

Display the current counter value

Inside the <template>, add a <p> element that shows the text Clicked: followed by the current counter.value.

Vue

import { ref } from 'vue'
const counter = ref(0)



  Click me
  
  

Need a hint?

Use mustache syntax {{ counter.value }} to show the reactive value.