v-on / Events
v-on listens for DOM events. Shorthand: @click. Modifiers (.prevent, .stop, .once, .self) cover 90% of imperative event code.
Events + modifiers
EXAMPLE
<script setup>
import { ref } from 'vue';
const count = ref(0);
const input = ref('');
function save(payload) { console.log('save', payload); }
</script>
<template>
<!-- Simple handler -->
<button @click="count++">Bump ({{ count }})</button>
<!-- Method handler with the event object -->
<button @click="e => save({ at: Date.now(), x: e.clientX })">Save</button>
<!-- Modifiers replace boilerplate -->
<form @submit.prevent="save(input)">
<input v-model="input" @keydown.enter.exact="save(input)">
</form>
<!-- Run only once -->
<button @click.once="track()">First click only</button>
<!-- Stop propagation -->
<div @click="parent()">
<button @click.stop="child()">Child only</button>
</div>
</template>
Why it matters
Modifiers compose: @click.stop.prevent is both stopPropagation and preventDefault. Read them right-to-left.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<button v-on:click="count++">+</button> <!-- shorthand --> <button @click="count++">+</button>Try it Yourself »
Exercise
Shorthand for v-on:click.
<button
"send">Go</button>
One symbol + click + =.
Discussion
Loading…