v-on (@)
v-on listens to DOM events such as click and input, and @ is its short form.
In this page:
Syntax
<button @click="handler">text</button>
<button v-on:click="count++">text</button>v-on (@)
Write @click="handler" or @click="count++" to react to events. Handlers receive the native event, and you can pass arguments with $event. Modifiers like .prevent, .stop, .once and key modifiers such as .enter keep handlers clean.
Note:
@submit.prevent stops the browser from reloading the page.
Example: v-on (@)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="hits++">Hits: {{ hits }}</button>
<button @click="greet('Ada', $event)">Greet</button>
<button @click.once="onceCount++">Once: {{ onceCount }}</button>
<p>{{ log }}</p>
</div>
<script>
Vue.createApp({
data() { return { hits: 0, onceCount: 0, log: "" }; },
methods: { greet(name, e) { this.log = "Hello " + name + " from " + e.type; } },
}).mount("#app");
const [b1, b2, b3] = document.querySelectorAll("button");
b1.click(); b1.click(); b2.click(); b3.click(); b3.click();
Vue.nextTick(() => console.log(document.querySelector("#app").textContent.replace(/\s+/g, " ").trim()));
</script>
</body>
</html>
<!-- Output:
Rendered: Hits: 2GreetOnce: 1Hello Ada from click
console: Hits: 2GreetOnce: 1Hello Ada from click
-->Live Example
Related Topics
Common Mistakes
- Calling the method with parentheses by mistake in attributes
- Forgetting .prevent on form submits
- Writing onclick instead of @click
Chapter Summary
- @event listens to DOM events
- $event is the native event
- Modifiers: prevent, stop, once
- Key modifiers like .enter
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: