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.
Asociación de evento de click al botón
Vamos a asociarle un evento de click a nuestro botón.
Para eso podemos usar esta sintaxis:
@click
Aquí nos está autocompletando.
Hay que desactivar esto porque puede resultar un poco incómodo.
Para configurar esto, tenemos que setear esta variable en false. Entonces, vamos a hacerlo.
Configuración de la extensión Volar
Es una configuración de nuestra extensión de "Volar". Así que:
- Nos vamos rápidamente a la configuración de Volar.
- Buscamos "Volar" en las extensiones.
- Lo tenemos instalado, le damos clic al ícono de configuración.
- Nos vamos a "Extensión Settings".
- Buscamos la configuración que queremos desactivar.
- Desactivamos la opción correspondiente.
- Cerramos la configuración.
Con esto evitamos que nos incomode el autocompletado.
Asignación de evento @click
Ahora, vamos a asociar el evento @click al botón.
Cuando se haga click, vamos a asignar a nuestra variable count el valor que ya tiene aumentado en uno:
<button @click="count++">Incrementar</button>
Guardamos cambios.
Y cuando presionamos ahora el botón, veremos que el contador ya se encuentra funcionando.
Separación de lógica y template
Esto funciona muy bien.
Sin embargo, muchas veces cuando se ejecuta un evento, queremos definir varias líneas de código, no solamente una.
Aquí no podemos escribir muchas líneas, ya que sería confuso y también 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 deben escribirse dentro de nuestra etiqueta <script>.
Entonces, hagamos eso:
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
incrementar() {
this.count++;
}
}
};
</script>
Y en el template, simplemente llamamos al método:
<button @click="incrementar">Incrementar</button>
Con esta separación, mantenemos un código más limpio y estructurado.
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