Guía para el manejo de eventos de Vue con v-on: mouse, teclado, formulario y eventos personalizados

En esta guía, aprenda cómo manejar eventos de JavaScript con Vue, usando v-on. Maneje eventos de mouse, teclado, formularios y personalizados a través de prácticos ejemplos de código.

Introducción

El manejo de eventos es un concepto muy importante cuando se trata de hacer una aplicación interactiva. En términos generales, un evento es un indicador de una interacción entre un usuario y nuestra aplicación: hacer clic, escribir en un teclado, etc. Las aplicaciones interactivas y reactivas se basan, en esencia, en el concepto de reaccionar ante eventos: cada vez que se detecta un evento, una aplicación llama a una función correspondiente que maneja el evento detectado.

Estas funciones se conocen como controladores de eventos.

Vue no es diferente. Tiene un mecanismo de manejo de eventos que le permite capturar y manejar eventos desde dentro de cada archivo de componente independiente. Los eventos pueden aparecer como entrada del usuario o podemos crearlos manualmente en el código y emitirlos cuando sea necesario.

En este artículo, exploraremos cómo manejar eventos en Vue usando la directiva v-on. El manejo de eventos nos permite ejecutar JavaScript como respuesta a eventos DOM. Aprenderemos a manejar los eventos de clic, enviar, desplazamiento y algunos eventos de teclado.

Directiva v-on en Vue

Vue usa la directiva v-on para capturar y manejar eventos. Define un evento DOM que escucha y asigna una función de JavaScript que se ejecuta cuando se detecta el evento:

1
2
<div v-on:click="handleClick"/>
<div @click="handleClick"/>

{.icon aria-hidden=“true”}

Nota: La directiva v-on se usa indistintamente con el símbolo @ - v-on:event-name es igual a @event-name.

Eventos comunes en Vue

¡Hay muchos eventos que se pueden capturar! Sin embargo, no todos ellos se utilizan a diario. La mayoría de los eventos que rastreará comúnmente se pueden dividir en tres categorías: mouse, teclado y eventos de formulario.

Cada uno de ellos tiene algunas distinciones específicas, así que echemos un vistazo más profundo a cada grupo individual y cómo manejarlos.

Eventos de ratón en Vue

Los eventos del mouse se activan cada vez que un usuario hace clic, arrastra, suelta o hace algo con el mouse en un elemento en particular. Por ejemplo, el siguiente código generará una alerta cuando un usuario haga clic en un botón usando v-on:click:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div>
    <!-- `v-on:click` detects the click event -->
    <button v-on:click="showAlert('Thank you for clicking the button!')" >
        Show alert
    </button>
</div>

<script>
export default {
    methods: {
        showAlert: (message) => {
            alert(message);
        }
    }
};
</script>

Alternativamente, podemos hacer uso del símbolo @ y evitar usar v-on como se ve a continuación:

1
2
3
4
5
<div>
    <button @click="showAlert('Thank you for clicking the button!')">
        Show alert
    </button>
</div>

Eventos de teclado en Vue

Eventos de teclado se activan cuando un usuario escribe un botón en particular en el teclado. Puede registrar un evento cuando un usuario presiona una tecla (keydown), comienza a presionar una tecla (keypress) o suelta una tecla (keyup):

1
<input type='text' placeholder='Type something' @keypress='handleKeyPressed' @keydown='handleKeyDown' @keyup='handleKeyUp' />

Por ejemplo, supongamos que queremos una alerta para mostrar lo que se escribe en un campo de entrada cuando presionamos la tecla Intro en nuestro teclado. Esto se puede lograr fácilmente usando @keyup.enter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div>
    <input type="text" v-model="name" @keyup.enter="showAlert(name)" />
</div>

<script>
export default {
    data() {
        return {
            name: ""
        };
    },
    methods: {
        showAlert: (message) => {
            alert(message);
        }
    }
};
</script>

Echando un vistazo al código anterior, notará que agregamos modificadores de eventos clave, como .enter. Los modificadores de eventos clave en Vue ofrecen un amplio soporte para escuchar las entradas del teclado.

El modificador de evento clave sigue la estructura:

1
2
3
v-on.keyevent.keyname
// Or
v-on.keyevent.keycode

{.icon aria-hidden=“true”}

Nota: Los códigos clave son generalmente obsoletos y debe evitar usarlos porque la mayoría de los navegadores modernos no lo hacen. No los apoyaré más. Solo es razonable usarlos por razones heredadas, si necesita admitir navegadores antiguos que no son compatibles con los modificadores de nombres clave.

Vue facilita su trabajo al proporcionar alias para los códigos de tecla más utilizados: .enter, .tab, .delete (encapsula las teclas "Delete" y "Backspace"), .esc, .espacio, .arriba, .abajo, .izquierda, .derecha.

De cualquier manera, debe usar nombres clave en lugar de códigos clave siempre que sea posible: ¡esa es una forma de preparar su código para el futuro!

Los nombres de las claves siguen la convención de nomenclatura simple en Vue. Lo primero que debe saber es que puede encontrar todos los nombres de clave válidos en [KeyboardEvent.key]{herf=“https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key /Valores_clave” rel=“nofollow noopener noreferrer” target="_blank"}. Esos nombres usan mayúsculas y minúsculas (por ejemplo, “CapsLock”), pero los nombres clave en Vue usan kebab casing (por ejemplo, “caps-lock”).

Entonces, para encontrar un nombre de clave Vue válido, eche un vistazo a su nombre en [KeyboardEvent.key]{herf=“https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ key/Key_Values” rel=“nofollow noopener noreferrer” target="_blank"} y conviértalo en una caja de kebab. ¡Tan simple como eso!

{.icon aria-hidden=“true”}

Nota: También puede encadenar varios nombres de teclas como v-on.keyup.ctrl.enter.

En caso de que deba usar códigos clave, nuevamente, puede hacerlo, aunque no se recomienda:

1
<input type="text" v-model="name" @keyup.13="showAlert(name)" />

La decimotercera tecla es "Entrar".

{.icon aria-hidden=“true”}

Nota: Puedes consultar los códigos clave aquí.

Eventos de formulario en Vue

Los eventos de formulario se activan mediante acciones de formulario como el envío, el cambio de campo de entrada y mucho más, utilizando nombres de eventos como :enviar, :cambiar, :restablecer. El siguiente código ilustra cómo puede mostrar un mensaje de alerta cuando se envían los datos del formulario:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form className="new-task" @submit="handleSubmit">
    <input
        type="text"
        placeholder="Type to add new tasks"
        v-model="newTask"
    />
</form>

<script>
export default {
    data() {
        return {
            newTask: ""
        };
    },
    methods: {
        handleSubmit() {
            alert(this.newTask);
        }
    }
};
</script>

Una cosa que debe tener en cuenta al administrar envíos de formularios en aplicaciones de JavaScript es que debe utilizar la función nativa preventDefault() del evento de envío antes de ejecutar la función de manejo de formularios. De lo contrario, la página será redirigida antes de que la función de validación de formulario tenga la oportunidad de validar un formulario. Esto se debe a que, de forma predeterminada, la siguiente acción esperada es reenviar los datos a la API REST de un servidor, que no tenemos aquí.

Esto se logra fácilmente con Vue agregando un modificador de evento prevenir directamente a la plantilla de formulario, en lugar de hacerlo manualmente en su controlador. Cuando se agrega, un modificador prevenir se asegura de que el evento de envío no vuelva a cargar la página. Vale la pena señalar que el modificador se inserta después de . en la directiva:

1
<form @submit.prevent="handleSubmit"></form>

Vue ofrece varios modificadores de eventos que son útiles en escenarios comunes de manejo de eventos:

  • .stop - detener la propagación de eventos de clic:
1
<a v-on:click.stop="doThis"></a>
  • .capture - un evento dirigido a un elemento secundario, dentro de un elemento principal, es manejado primero por el elemento principal, antes de ser delegado al elemento secundario:
1
<div v-on:click.capture="doThis"></div>

Hay otros como .self, .once, .passive, etc.

{.icon aria-hidden=“true”}

Nota: Los modificadores también se pueden encadenar. Por ejemplo v-on:click.stop.prevent="handleClick".

Escribir y emitir eventos personalizados en Vue {#escribir y emitir eventos personalizados en vue}

Hasta ahora, hemos discutido el manejo de eventos nativos. Ahora, veamos cómo hacer que un componente emita su propio evento, dado que Vue es un marco basado en componentes.

Supongamos que queremos que un componente secundario transmita información a un componente principal. Los datos de prop solo se pueden enviar de padres a hijos, no al revés, por lo tanto, no podemos utilizarlos aquí. Una solución es que el componente hijo emita un evento y el padre lo escuche.

Cuando desee que se emita el evento, use this.$emit("my-event-name") del componente secundario. Supongamos que tenemos un componente ChildComponent que debe notificar a su padre MainPage que se ha cerrado.

Componente secundario

1
2
3
4
5
6
7
export default {
    methods: {
        onClose() {
            this.$emit('close-dialog');
        },
    },
};

Además, también puede enviar datos en su evento personalizado. MainPage puede acceder a esos datos en la función de controlador del evento close-dialog:

1
2
3
onClose() {
    this.$emit("close-dialog", { time: Date.now() });
}

Pagina principal

El componente principal (MainPage) puede manejar el evento personalizado exactamente igual que lo haría con un evento nativo.

1
2
3
<div>
    <dialog-component @close-dialog="handleEvent" />
</div>

El controlador de eventos puede acceder a los datos enviados cuando se emitió el evento close-dialog:

1
2
3
handleEvent ({ time }) {
    console.log(`The Dialog was closed at ${time}`);
}

Conclusión

En este artículo, hemos aprendido cómo manejar eventos en Vue usando v-on. Hemos explicado los tipos de eventos más comunes: eventos de mouse, eventos de formulario y eventos de teclado.

Además, hemos explicado cómo crear eventos personalizados en Vue. Después de leer este artículo, debería tener una descripción general completa del manejo de eventos en Vue, debería poder manejar todos los eventos nativos y poder crear sus propios eventos personalizados a partir de almidón.