Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Template: Eventos
Veamos cómo podemos escuchar eventos sobre nuestros componentes, directamente sobre nuestro template.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Vamos a asociarle un evento de click a nuestro botón. Para eso podemos usar esta sintaxis. "@click". Aquí nos está auto completando. Hay que desactivar esto porque esto puede resultar un poco incómodo. Para configurar esto tenemos que setear esta variable en false. Entonces vamos a hacer ello. Es una configuración de nuestra extensión de "volar". Así que nos vamos rápidamente aquí, vamos a ver "volar". Aquí está. Lo tenemos instalado. Le damos clic a este icono. Nos vamos a “Extensión Settings” y vamos a buscar esta configuración. Aquí está. Esto lo vamos a desactivar. Ok, cerramos, cerramos y ya está. Es para que no nos incomode. Bien, vamos a asociar entonces aquí un evento de "@click" cuando se haga click vamos a asignar a nuestra variable count el valor que ya tiene aumentado en uno. Entonces guardamos cambios. Y cuando presionamos ahora el botón, vamos a ver que el contador ya se encuentra funcionando. Esto funciona muy bien. Sin embargo, muchas veces cuando se ejecuta un evento, queremos definir varias líneas de código, no solamente una, como en este caso, y aquí no podemos escribir muchas líneas. Sería confuso y también sería inadecuado tener lógica dentro de nuestro template. La idea es que el template simplemente exprese lo que queremos mostrar al usuario. La lógica y la gestión del estado. Preferentemente hay que escribirla dentro de nuestra etiqueta script. Entonces hagamos eso.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
22
Template: Eventos
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript