"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Eventos en VueJs 2

Los eventos en VueJs 2 al igual que en cualquier otro framework, librería o en el propio lenguaje JavaScript nos permiten interactuar con elementos de nuestra página web para que apliquen cierta lógica.

En el caso de VueJs estos se declaran mediante una directiva en el propio html, puede que eso nos resulte extraño ya que estamos acostumbrados a que en JavaScript los eventos se definan dentro del código, pero tiene sus ventajas que esto sea así.

Por ejemplo si pensamos en Angular o en una aplicación SPA, para evitar colisiones tenemos que estar pendientes de que cuando cambiamos de página destruyamos los eventos que hemos declarado en esta, ya que sino quedan activos escuchando y son susceptibles de ser disparados por error.

De manera que solucionabamos esta problemática o bien a base de namespaces en algun caso o destruyendo el evento generalmente.

Los eventos en VueJs 2 hacen este trabajo por ti, ya que cuando destruyes el ViewModel todos los listeners que escuchaban ese modelo son borrados con él automaticamente.

Tampoco será necesario ya que declares namespaces a los eventos para distinguirlos, el evento declarado pertenece a la instancia del componetente.

Y a mayores según la documentación dice que es más sencillo localizar las implementaciones de las funciónes controladoras dentro de tu código JS simplemente echando un vistado a la plantilla HTML.

Y dado que no tienes que agregar manualmente listeners de eventos en JS, el código de tu ViewModel puede ser lógica pura y estar libre del DOM. Esto lo hace más sencillo de probar.

Vistas las ventajas pasamos a explicar como se usa.

Sintaxis

La manera más común es usar la directiva v-on

Las directivas pueden tener atributos, los distinguimos porque estan al lado suyo separados por ‘:’, y sirven para definir su comportamiento pues las ejecutan usando ese mismo parametro.

En el caso de v-on los atributos son el tipo de evento que queremos declarar para ese elemento, y aquí teneis el listaod de eventos que soporta JavaScript:

Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón «sale» del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón «entra» en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>

El atributo que le pasamos es cualquiera de los eventos de arriba sin el «on» con el todos comienzan, el caso más habitual es el del evento click, pongamos un ejemplo:

//EN EL HTML
<div id="ejemplo">
  <button v-on:click="contador += 1">Botón 1</button>
  <button v-on:click="accion">Botón 2</button>
</div>
//EN EL JS
var ejemplo = new Vue({
  el: '#ejemplo',
  data: {
    nombre: 'Oscar'
    contador: 0
  },
  methods: {
    accion: function (event) {
      // `this` dentro de los métodos apunta a la instancia de Vue
      alert('Hola ' + this.nombre + '!')
      // `event` es el evento nativo del DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

Hemos puesto los dos casos de uso juntos.

  • El primero es un botón que al ser pulsado suma 1 a una variable interna, como se puede apreciar escribimos el código directamente.
  • El segundo caso es un botón que devuelve un alert en pantalla tomando una variable interna también pero en este caso llamamos a un método de VueJs llamado «accion».
  • Ademas de llamar al método de esta manera tambien podriamos llamarlo directamente dentro del Javascript así.
ejemplo.accion();

Al igual que sucede en otras liberías como jQuery, el on tiene atajos para escribirlo, pensemos en el caso anterior, sería exactamente lo mismo haber escrito lo siguiente.

//EN EL HTML
<div id="ejemplo">
  <button @click=="contador += 1">Botón 1</button>
  <button @click=="accion">Botón 2</button>
</div>

Como se aprecia @click es lo mismo que poner v-on:click, lo mismo sucede para el resto de los eventos, por ejemplo @keyup equivale a poner v-on:keyup.

Podemos escoger ambas maneras de declarar la directiva, pero esta bien que conozcamos las dos posibilidades por si nos las encontramos en proyectos colectivos.

Ya hemos explicado como usar los atributos con esta directiva, pero VueJs también tiene la posibilidad de usar modificadores.

Distinguimos los modificadores porque estan al lado suyo separados por ‘.’, y son expresiones que modifican la manera como ejecutamos la directiva.
A diferencia de un atributo nosotros no debemos darle ningun valor, por el solo hecho de estar declarado la directiva va a ejecutar cierta lógica, la modifican siempre de la misma manera, de ahi su nombre.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)