Vue 4: Event Handling with v-on
easy⏱ 5 mincoursevue
@click and the native event
When you bind a method directly (@click="handleClick"), Vue automatically passes the native DOM Event object as the first argument, so you can read event.target, event.clientX, etc. Inline expressions (@click="count++") don't receive it automatically — you'd write @click="handleClick($event)" to pass it explicitly.
<!-- Method handler: event is passed automatically -->
<button @click="handleClick">Click</button>
<!-- Inline handler needs $event explicitly -->
<button @click="handleClick($event)">Click</button>
Event modifiers
.prevent calls event.preventDefault(), .stop calls event.stopPropagation() — chain them right onto the directive, like @submit.prevent or @click.stop, keeping that logic out of your handler function entirely.
<form @submit.prevent="onSubmit">...</form>
<div @click="onOuterClick">
<button @click.stop="onInnerClick">Won't bubble up</button>
</div>
Build the counter + form
In setup(), create a clicks ref, a lastX ref, and a submitted ref. Add a method handler that reads event.clientX, an inline handler that just increments, and a form using @submit.prevent.