0 day streak
javascript / beginner
Snippet

Event Handling with Methods

You can listen to DOM events using the @ symbol (shorthand for v-on). When the event occurs, you can trigger a function defined in your script. This allows you to respond to user interactions like mouse movements or clicks.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<template>
<div @mouseover="updateStatus">
Hover over me!
</div>
</template>
<script setup>
function updateStatus() {
console.log('User is hovering!');
}
</script>
vue
Breakdown
1
@mouseover="updateStatus"
Listens for the mouseover event on the div element.
2
function updateStatus() { ... }
The logic that runs when the user moves their mouse over the div.