Explicación de la directiva v-on en Vue.js

La preguntada fue: ¿Cuál de las siguientes directivas se utiliza para adjuntar oyentes de eventos que invocan métodos? La respuesta correcta es v-on.

La directiva v-on de Vue.js se utiliza para escuchar los eventos DOM directamente. En otras palabras, con v-on puedes responder a los eventos del usuario o a otros eventos en tu aplicación Vue.js llamando a los métodos de Vue cuando ocurren ciertos eventos.

Veamos un ejemplo para ilustrar esto. Supón que tienes un botón y quieres mostrar un mensaje en la consola cada vez que el usuario haga clic en ese botón. Esto es lo que podrías hacer con v-on:

<template>
  <button v-on:click="displayMessage">
    Click me
  </button>
</template>

<script>
export default {
  methods: {
    displayMessage: function() {
      console.log('El botón fue clickeado!');
    }
  }
}
</script>

En este ejemplo, cada vez que el usuario hace clic en el botón, se invoca el método displayMessage, que a su vez muestra un mensaje en la consola.

v-on no se limita solo a los clics del ratón. Puedes utilizarlo para escuchar todo tipo de eventos DOM, como keyup, submit, focus, mouseenter, etc. Por ejemplo, aquí estamos escuchando un evento de entrada (keypress) en un campo de entrada de texto:

<template>
  <input v-on:keyup="displayKey">
</template>

<script>
export default {
  methods: {
    displayKey: function(event) {
      console.log('Has pulsado la tecla: ' + event.key);
    }
  }
}
</script>

Para simplificar aún más la sintaxis, Vue.js permite sustituir v-on por el prefijo @. Por ejemplo, la siguiente línea de código tiene exactamente el mismo comportamiento que el primer ejemplo que mencionamos:

<button @click="displayMessage">Click me</button>

En resumen, la directiva v-on es una parte esencial de Vue.js que permite una interactividad rica en las aplicaciones del lado del cliente al ser capaz de escuchar y responder a los eventos del usuario de manera dinámica.