Vue 4: Manejo de eventos con v-on
easy⏱ 5 mincoursevue
@click y el evento nativo
Cuando enlazás un método directamente (@click="handleClick"), Vue le pasa automáticamente el objeto Event nativo del DOM como primer argumento, así podés leer event.target, event.clientX, etc. Las expresiones inline (@click="count++") no lo reciben automáticamente — escribirías @click="handleClick($event)" para pasarlo explícitamente.
<!-- Method handler: event is passed automatically -->
<button @click="handleClick">Click</button>
<!-- Inline handler needs $event explicitly -->
<button @click="handleClick($event)">Click</button>
Modificadores de evento
.prevent llama a event.preventDefault(), .stop llama a event.stopPropagation() — se encadenan directamente sobre la directiva, como @submit.prevent o @click.stop, dejando esa lógica completamente fuera de tu función handler.
<form @submit.prevent="onSubmit">...</form>
<div @click="onOuterClick">
<button @click.stop="onInnerClick">Won't bubble up</button>
</div>
Construí el contador + formulario
En setup(), creá un ref clicks, un ref lastX y un ref submitted. Agregá un handler de método que lea event.clientX, un handler inline que solo incremente, y un formulario que use @submit.prevent.