Event Handling & Input Binding in Vue.js
From the Vue.js cheat sheet · Directives · verified Jul 2026
Event Handling & Input Binding
v-on (@) and v-model directives
vue
<!-- Event handling (Vue 2 & 3) -->
<button @click="handleClick">Click</button>
<button @click="count++">Count: {{ count }}</button>
<!-- v-model (Vue 2 & 3) -->
<input v-model="message" />
<textarea v-model="text"></textarea>
<select v-model="selected">
<option>A</option>
<option>B</option>
</select>
<!-- Modifiers -->
<input v-model.trim="text" />
<input v-model.number="age" />
<form @submit.prevent="onSubmit">💡 @ is shorthand for v-on, : is shorthand for v-bind
⚡ Event modifiers can be chained: @click.stop.prevent
📌 v-model is two-way binding, equivalent to :value + @input
🔥 Vue 3 supports multiple v-model bindings on components