Aprender a manejar eventos en Vue.js es lo que transforma un componente estático en una interfaz viva. Aquí vas a entender cómo capturar clics, envíos de formularios y pulsaciones de teclado usando la directiva v-on, métodos reactivos y modificadores nativos del framework.

¿Cómo escuchar eventos del usuario en Vue.js?

Vue ofrece la directiva v-on como su herramienta principal para reaccionar a eventos del DOM. La sintaxis es directa: escribes v-on: seguido del nombre del evento nativo de JavaScript que quieras escuchar, por ejemplo click, keyup o submit.

Imagina que tienes un botón que necesita contar cuántas veces lo presionan. Empiezas con un template que contiene la etiqueta <button> y dentro colocas una variable llamada counter, declarada con valor inicial cero dentro del objeto que retorna data.

¿Qué hace la directiva v-on en Vue.js? Escucha eventos nativos del DOM y ejecuta una función definida en el componente cuando ese evento ocurre. Es el equivalente reactivo de addEventListener en Vanilla JavaScript.

¿Dónde se definen las funciones que responden a eventos?

Las funciones no pueden ser cualquier función suelta de JavaScript: deben vivir dentro del objeto methods del componente. Ese objeto es un JSON donde declaras cada método que tu template podrá invocar.

Por ejemplo, defines un método llamado increment dentro de methods, y luego lo conectas al botón con v-on:click="increment". Al hacer clic, Vue ejecuta esa función automáticamente sin que tengas que tocar el DOM.

¿Cómo conectar un evento con un atributo reactivo?

Aquí es donde Vue se vuelve interesante de verdad. Dentro de un método puedes acceder a la instancia del componente usando la palabra reservada this, y desde ahí leer o modificar cualquier variable de data.

Si escribes this.counter++ dentro del método increment, cada clic incrementa el contador y la vista se actualiza sola. No necesitas manipular nodos ni forzar renders: la reactividad se encarga.

Las piezas clave que conviven en este flujo son tres:

• data devuelve las variables reactivas iniciales del componente.
• methods agrupa las funciones invocables desde el template.
• this dentro de un método apunta a la instancia y da acceso a ambos.

¿Qué otros eventos nativos puedo escuchar?

Cualquier evento de JavaScript funciona con la misma sintaxis. Keyup, por ejemplo, dispara el método cuando sueltas una tecla del teclado, así que podrías incrementar el contador presionando la barra espaciadora.

Los eventos de mouse, de teclado y los táctiles siguen exactamente la misma estructura. La directiva v-on es agnóstica al tipo de evento: tú decides qué escuchar.

¿Cómo manejar el evento submit y preventDefault?

El evento submit es un caso especial porque, por defecto, recarga la página al enviar un formulario. Para trabajar con él necesitas acceder al objeto event, que recibes como primer argumento de la función vinculada.

Dentro del método puedes ejecutar event.preventDefault() para cancelar la recarga, o event.stopPropagation() para detener la propagación. Sin esto, cualquier console.log o lógica posterior se pierde porque el navegador limpia el estado al recargar.

Un truco práctico de depuración: activa la opción Preserve log en la consola del navegador para conservar los mensajes incluso cuando ocurre una recarga.

¿Qué es preventDefault en un formulario? Es un método del objeto event que cancela el comportamiento por defecto del navegador, como recargar la página al enviar un submit. Te permite controlar manualmente qué hacer con los datos del formulario.

¿Qué son los modificadores de eventos en Vue?

Vue añade una capa de azúcar sintáctico para evitar que tengas que llamar manualmente a preventDefault o stopPropagation cada vez. Se llaman modificadores y se concatenan al evento usando notación de punto.

Los más usados en formularios son:

• .prevent: ejecuta preventDefault automáticamente.
• .stop: ejecuta stopPropagation automáticamente.
• .prevent.stop: combina ambos en una sola declaración.

Así, escribir v-on:submit.prevent="submitForm" equivale a llamar event.preventDefault() dentro del método, pero deja el código más limpio. La documentación oficial de Vue lista todos los modificadores disponibles para teclado, mouse y eventos de sistema.

¿Se pueden usar nombres de eventos dinámicos?

Sí. Igual que ocurre con v-bind, el nombre del evento puede provenir de una variable. Defines una propiedad en data con el nombre del evento como cadena y la inyectas con corchetes en la directiva.

Esto abre la puerta a componentes configurables donde el evento a escuchar se decide en tiempo de ejecución, y por supuesto puedes seguir encadenando modificadores como .prevent o .stop sobre la variable dinámica.

Ahora que entiendes cómo capturar eventos y mutar atributos reactivos, te propongo un reto: construye un contador con dos botones, uno para incrementar y otro para decrementar, mostrando el total en pantalla. Déjame tu progreso en los comentarios, me interesa ver cómo lo resuelves.