Modificadores de eventos de v-on
.stop, .prevent, .self, .once, .capture, .passive: cuándo y por qué usar cada modificador.
Modificadores de eventos de v-on es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Gestión de eventos más limpia
La directiva v-on (abreviada como @) adjunta detectores de eventos. Los modificadores de eventos son sufijos que se encargan de tareas habituales del DOM, como detener la propagación o impedir el comportamiento predeterminado, para que sus manejadores se centren en la lógica.
Qué problema resuelven los modificadores
Sin modificadores, debe incluir código repetitivo del DOM dentro de los manejadores, como llamar a event.preventDefault() o event.stopPropagation(). Los modificadores trasladan esa tarea a la plantilla de forma declarativa.
.stop para stopPropagation
.stop impide que el evento se propague a los elementos padre; equivale a llamar a event.stopPropagation().
<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
<button @click.stop="onInner">Click</button>
</div>.prevent para preventDefault
.prevent llama a event.preventDefault(). Su uso clásico consiste en impedir que un formulario vuelva a cargar la página al enviarse.
<form @submit.prevent="onSubmit">
<button type="submit">Save</button>
</form>Encadenamiento de modificadores
Puede combinar modificadores. El orden importa: se aplican de izquierda a derecha.
<a @click.stop.prevent="onClick">Link</a>.self: solo el elemento mismo
.self ejecuta el manejador solo si el objetivo del evento es el propio elemento, no un elemento hijo cuyo evento se haya propagado. Es ideal para fondos superpuestos.
<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
<div class="modal">...</div>
</div>Modificadores de teclas
Para los eventos de teclado, puede escuchar teclas específicas. @keyup.enter se ejecuta solo cuando se suelta la tecla Enter.
<input @keyup.enter="search" />Más modificadores de teclas
Vue proporciona alias para las teclas habituales: .enter, .esc, .tab, .delete, .space y teclas de flecha como .up y .down.
<input @keyup.esc="cancel" @keyup.up="previous" />.once: ejecutar un manejador una sola vez
.once ejecuta el manejador como máximo una vez y después elimina el detector. Es útil para acciones únicas, como cerrar un mensaje de bienvenida.
<button @click.once="initialize">Start</button>.passive para mejorar el rendimiento del desplazamiento
.passive indica al navegador que el manejador no llamará a preventDefault(). Esto permite que el navegador se desplace con fluidez sin esperar, lo que mejora el rendimiento de los eventos táctiles y de desplazamiento.
<div @scroll.passive="onScroll">...</div>Elección del modificador adecuado
.stop— detener la propagación..prevent— bloquear el comportamiento predeterminado..self— ignorar los eventos propagados desde elementos hijo..once— ejecutar una vez..passive— no impedir nunca el comportamiento predeterminado; mejorar el rendimiento del desplazamiento.
Nota: no combine nunca .passive con .prevent; son contradictorios.
Comprobación rápida
Elija el modificador adecuado.
Repaso
Los modificadores de eventos mantienen limpios los manejadores:
.stop= stopPropagation,.prevent= preventDefault..selfse ejecuta solo en el propio elemento.- Los modificadores de teclas, como
.enter, se dirigen a teclas específicas. .onceejecuta un manejador una vez;.passivemejora el rendimiento del desplazamiento.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Modificadores de eventos de v-on» es gratis?
Sí — el texto completo de «Modificadores de eventos de v-on» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Modificadores de eventos de v-on»?
.stop, .prevent, .self, .once, .capture, .passive: cuándo y por qué usar cada modificador. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Modificadores de eventos de v-on»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- v-model: aspectos internos del binding bidireccional
- Modificadores de eventos de v-on
- Bindings dinámicos y múltiples con v-bind
- Creación de directivas personalizadas