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:

  1. Nos vamos rápidamente a la configuración de Volar.
  2. Buscamos "Volar" en las extensiones.
  3. Lo tenemos instalado, le damos clic al ícono de configuración.
  4. Nos vamos a "Extensión Settings".
  5. Buscamos la configuración que queremos desactivar.
  6. Desactivamos la opción correspondiente.
  7. 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 pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos






















22

Template: Eventos






































































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.