Eventos de Vue.js

Vue.js nos permite interceptar cualquier evento DOM usando la directiva v-on en un elemento. Este tema es clave para hacer que un componente sea interactivo


¿Qué son los eventos de Vue.js?

Vue.js nos permite interceptar cualquier evento DOM usando elv-ondirectiva sobre un elemento.

Si queremos hacer algo cuando ocurre un evento de clic en este elemento:

<template>
  <a>Click me!</a>
</template>

agregamos unv-ondirectiva:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

Vue también ofrece una sintaxis alternativa muy conveniente para esto:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Puede optar por utilizar el paréntesis o no.@click="handleClick"es equivalente a@click="handleClick()".

handleClickes un método adjunto al componente:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

Los métodos se explican con más detalle en miTutorial de métodos Vue.

Lo que necesita saber aquí es que puede pasar parámetros de eventos:@click="handleClick(param)"y serán recibidos dentro del método.

Accede al objeto de evento original

En muchos casos, querrá realizar una acción en el objeto de evento o buscar alguna propiedad en él. ¿Cómo se puede acceder a él?

Usa el especial$eventdirectiva:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script>

y si ya pasas una variable:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(text, event) { console.log(text) console.log(event) } } } </script>

Desde allí podrías llamarevent.preventDefault(), pero hay una mejor manera: modificadores de eventos

Modificadores de eventos

En lugar de jugar con las "cosas" de DOM en sus métodos, dígale a Vue que se encargue de las cosas por usted:

  • @click.preventllamadaevent.preventDefault()
  • @click.stopllamadaevent.stopPropagation()
  • @click.passivehace uso de laopción pasiva de addEventListener
  • @click.captureutiliza la captura de eventos en lugar de la propagación de eventos
  • @click.selfasegúrese de que el evento de clic no haya sido generado por un evento secundario, sino que haya ocurrido directamente en ese elemento
  • @click.onceel evento solo se activará exactamente una vez

Todas esas opciones se pueden combinar agregando un modificador después del otro.

Para obtener más información sobre propagación, burbujeo / captura, consulte miGuía de eventos de JavaScript.

Descarga mi gratisManual de Vue


Más tutoriales de vue: