Vue listens to DOM events with v-on or the @ shorthand. Handlers can be inline expressions or methods returned from setup().
Handler patterns
- Method reference:
@click="toggle" - Inline expression:
@click="count++" - With argument:
@click="remove(item.id)" - Event object:
@submit="onSubmit($event)"
Modifiers
@click.stop— callstopPropagation@submit.prevent— callpreventDefault(essential for handled forms)@keyup.enter— filter by key
Self-check
- When do you need
.preventon a form? - How do you pass the native event to a handler?
Challenge
Toggle panel
- Wire the button to flip
open. - Show details only when
openis true.
Done when: clicking the button shows and hides the details paragraph.