Handling User Events in Vue

Vue allows you to respond to user actions directly in the template using event directives. Instead of manually adding event listeners, you use the v-on directive or its shorthand @.

// Vue
<script setup>
function handleClick() {
  console.log("Button clicked");
}
</script>

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

The @click directive listens for a click event and runs the function when the button is pressed.

You can also update reactive data inside event handlers.

// Vue
<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">Increase</button>
</template>

Each time the button is clicked, the function runs and updates the value.

You can pass arguments to event handlers.

// Vue
<script setup>
function greet(name) {
  console.log("Hello " + name);
}
</script>

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

Vue simplifies event handling by connecting user actions directly to your application logic.