Otra cosa que puedes hacer en el Sistema de vistas de Vue es poder escuchar eventos en elementos del DOM. Básicamente puedes hacer lo mismo que haces al usar addEventListener en Javascript Vanilla pero desde la propia vista, mucho más cómodo.

La sintaxis es muy sencilla, tan solo tienes que poner @ y el nombre del evento que quieres usar. Dentro de las comillas tienes que poner el método del componente que quieres ejecutar. Importante, tiene que ser un método y no una computada. Si no sabes lo que es una computada hecha un ojo a Computadas de Vue.

La lista de eventos a los que puedes escuchar es la que ya tiene Javascript vanilla por defecto, solo que sin usar el on en el nombre.

Aquí tienes una selección de los más usados.

Eventos de ratón

  • click: Se pulsa con el ratón sobre el elemento
  • mousedown: Solo cuando se pulsa el click con el ratón (aunque se mantenga presionado el evento ya ha saltado)
  • mouseup: Solo cuando se suelta el click del ratón sobre el evento (al pulsarse no salta)
  • mouseover: Cuando se pasa el ratón por encima del elemento
  • mouseout: Cuando se mueve el ratón fuera del elemento
  • mousemove: Cuando se está moviendo el ratón mientras que está encima del elemento
  • wheel: Cuando se hace scroll con el ratón sobre un elemento

Por ejemplo para detectar cuando el usuario hace click sobre un botón:

<button @click="clickHandler"></button>

Para más información sobr esto consulta el artículo de Eventos de click en Vue 🚧.

Eventos de teclado

  • keyup: Cuando el usuario suelta una tecla
  • keydown: Cuando el uaurio presiona una tecla
  • keypress: Cuando el usuario hace click sobre una tecla

Estos eventos en Vue tienen una partucularidad y es que se puede poner un modificador para que solo salte el manejador cuando se presiona cierta tecla, por ejemplo:

<input v-on:keyup.18="submit" />

El 18 se refiere al keycode de la tecla, en este ejemplo corresponde a la tecla alt. Puedes ver la lista completa de keycodes aquí.

Como manejar keycodes es complicado porque de primeras no sabes a qué tecla se refiere Vue tiene algunos alias para ciertos keycodes, los alias son:

  • .up
  • .down
  • .left
  • .right
  • .enter
  • .tab
  • .delete (captura las teclas “Delete” y “Backspace”)
  • .esc
  • .space

Otros eventos muy utilizados

  • submit: Cuando el formulario es enviado (el usuario hace click sobre botón de submit). Es recomendable usar prevent para que no se refresque la página al enviar el formulario.
  • resize: Cuando el usuario hace resize del elemento.
  • scroll: Cuando el usuario mueve la barra de scroll del elemento.

Obviamente estos no son todos los eventos que hay, pero si que son los eventos que yo personalmente más uso, el resto rara vez los necesito.

De todas formas aquí te dejo la lista completa de eventos

Modificadores de los eventos

Los eventos tienen modificadores que cambian su comportamiento. Los modificadores se usan poniendo un punto tras el nombre del evento más el modificador que necesitas:

La lista de modificadores es la siguiente:

  • .stop: Se detiene la propagación del evento hasta el elemento padre.
  • .prevent: Ejecuta preventDefault del evento, útil para el submit del formulario
  • .capture: Se pone el modo captura del eventListener
  • .self: Solo se ejecuta el manejador si el evento es sobre el propio elemento
  • .once: Solo se ejecuta el manejador del evento una sola vez
  • .passive: Activa la opción pasiva del eventListener, recomendado para mejor rendimiento en eventos de scroll.