Modificadores de eventos de Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

Los modificadores de eventos de Vue.js ayudan a ignorar el manejo de eventos comunes, como no recargar la página cuando se envía el formulario y otros problemas similares. Los modificadores de eventos permiten manejarlos en el propio DOM. No necesitamos crear ningún componente nuevo para estos propósitos.

Modificadores de eventos de Vue.js:

• .stop : la propagación del evento de clic se detendrá.
• .prevent : Esto se utiliza para evitar que se vuelva a cargar la página web.
• .self : Esto se usa para decirle al elemento que active el evento si el elemento de destino es él mismo.
• .capture : Esto se usa para manejar el evento del elemento interno antes de que el elemento interno lo maneje.
• .once : Esto se usa para activar el evento una vez.
• .passive : Esto se usa para eventos táctiles para mejorar el rendimiento.

Sintaxis: Los modificadores de eventos son postfijos de directivas, lo que significa que actúan sobre alguna acción. Tenemos una acción de clic y queremos que el modificador de eventos deje de recargarse de la siguiente manera:

<form @submit.prevent="submitted"></form>

Ejemplo: En el siguiente ejemplo, tenemos un formulario con un elemento de entrada. Usamos el modificador de eventos para detener la recarga de la página web y luego llamamos a la función para pasar los valores enviados.

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2: en la sección de script de App.vue, agregue una variable de datos llamada búsqueda que almacenará el valor de entrada y declarará un método que se llamará cuando se envíe el formulario.

<script>
export default {
  data() {
    return {
      search: "",
    };
  },
  methods: {
    submitted(e) {
      this.search = e.target[0].value;
    },
  },
};
</script>

Paso 3: en la sección de plantilla de App.vue, cree un formulario con un elemento de entrada y un botón de envío.

<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
            GeeksforGeeks
   </h1>
    <strong>
        Vue.js Event Modifiers
    </strong>
    <br />
  </center>
  <center>
    <form @submit.prevent="submitted">
      <input type="text"
               name="search" 
               placeholder="Search Tutorials" />
      <button type="submit">Submit</button>
    </form>
    <p>Submitted value: {{ search }}</p>
  
  </center>
</template>

Paso 4: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida : al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers