How do you handle events in Vue.js?

You attach event handlers with the v-on directive followed by the event name (e.g. v-on:click), or its @ shorthand.

<div id="count">
  <button v-on:click="counter += 1">Add</button>
  <p>Clicked {{ counter }} times.</p>
</div>
<script>
Vue.createApp({
  data() { return { counter: 0 }}
}).mount('#count');
</script>

Shorthand: @click instead of v-on:click

<button @click="counter += 1">Add</button>

Go deeper:

• Event Handling (Vue docs) — inline vs. method handlers, the @ shorthand, and modifiers like .prevent, .stop, and .enter.