Aprenda a subir de nivel su manejo de eventos con la directiva v-on de Vue.
Escuchar los eventos de los usuarios es una parte integral de cualquier aplicación web receptiva, y las aplicaciones de Vue no son una excepción. Vue viene construido con una forma simple y eficiente de manejar eventos con su directiva v-on.
¿Qué es el enlace de eventos en Vue?
El enlace de eventos es una característica de Vue.js que le permite adjuntar un detector de eventos a un Modelo de objeto de documento (DOM) elemento. Cuando ocurre un evento, el detector de eventos desencadena una acción o respuesta en su aplicación Vue.
Puede lograr el enlace de eventos en Vue con el v-en directiva. Esta directiva le permite a su aplicación escuchar eventos de usuario como hacer clic, ingresar o presionar eventos.
Para adjuntar un detector de eventos a un elemento usando v-en, agregue el nombre del evento como parámetro a la directiva:
<html>
<cabeza>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<botónactivado: haga clic="contador++">Haz click en mibotón>
<pag>{{ encimera}}pag>
división>
<guion>
constante aplicación = Vue.createApp({
datos() {
devolver {
texto: 'Vue es increíble!',
contador: 0
}
}
})
aplicación.montar('#aplicación')
guion>
cuerpo>
html>
El bloque de código anterior muestra un ejemplo de una aplicación Vue que escucha un hacer clic evento. El bloque de código utiliza un botón para incrementar el encimera valor en la propiedad de datos de la instancia de Vue por uno.
El bloque de código anterior vincula la expresión de JavaScript contador++ a los botones hacer clic evento con el v-en directiva. Vue utiliza el @ carácter como una abreviatura en lugar del v-en directiva debido a v-enUso frecuente de:
<botón @hacer clic="contador++">Haz click en mibotón>
El enlace de eventos en Vue no se limita a los eventos de clic. Vue maneja otros eventos, como eventos de pulsación de tecla, eventos de mouseover y más.
Para vincular cualquiera de estos eventos al v-en directiva, sustituya la hacer clic event con el nombre del evento deseado:
<botón @tecla abajo.enter="contador++">Haz click en mibotón>
El código anterior configura un detector de eventos en el botón que escucha el pulsación de tecla evento. Cuando se presiona cualquier tecla mientras el botón tiene foco, Vue evalúa el contador++ expresión.
En la mayoría de las aplicaciones de Vue, puede manejar una lógica más compleja basada en eventos específicos que ocurren. Los eventos y los métodos funcionan de la mano para realizar acciones de aplicaciones basadas en un evento.
La propiedad de los métodos en Objeto de opciones de Vue contiene funciones importantes que su aplicación Vue necesita para mejorar la reactividad. Con la propiedad de métodos en Vue, puede manejar una lógica compleja basada en eventos.
Aquí hay un ejemplo de una aplicación Vue que muestra eventos manejados por la propiedad de métodos:
<html>
<cabeza>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<botón @hacer clic="incremento">Añadir 1botón>
<botón @hacer clic="reducir">reducir 1botón>
<pag>{{ encimera }}pag>
división>
<guion>
const app = Vue.createApp({
datos() {
devolver {
texto: '¡Vue es genial!',
contador: 0
}
},
métodos: {
incremento(){
este.contador = este.contador + 1
},
reducir() {
este.contador = este.contador - 1
}
}
})
aplicación.mount('#aplicación')
guion>
cuerpo>
html>
La aplicación Vue anterior muestra cómo vincular eventos con métodos. La aplicación tiene dos botones en los que los usuarios pueden hacer clic para incrementar o reducir el valor del contador en la propiedad de datos.
La aplicación logra esto con el @hacer clic directiva. El @hacer clic La directiva apunta a las funciones en la propiedad de métodos para manipular el valor del contador.
Al vincular un argumento al evento de clic, puede personalizar los métodos de incremento y reducción para agregar o reducir el valor del contador en función del argumento que pase al método.
Al igual que:
<cuerpo>
<divisiónidentificación="aplicación">
<botón @hacer clic="incremento (5)">Añadir 5botón><botón @hacer clic="reducir (3)">reducir 3botón>
<pag>{{ encimera }}pag>
división><guion>
const app = Vue.createApp({
datos() {
devolver {
texto: '¡Vue es genial!',
contador: 0
}
},
métodos: {
incremento (num){
este.contador = este.contador + num
},
reducir (num) {
este.contador = este.contador - num
}
}
})
aplicación.mount('#aplicación')
guion>
cuerpo>
Este bloque de código se extiende en la aplicación Vue anterior para permitir el paso de argumentos a los métodos vinculados al detector de eventos de clic en el botón.
Los métodos de incremento y reducción en la instancia de Vue toman un argumento num para aumentar o reducir la propiedad del contador.
Este ejemplo muestra cómo puede trabajar con argumentos al vincular métodos con eventos en Vue. La vinculación de métodos con eventos puede ayudar a que las aplicaciones de Vue sean más interactivas.
Explorando los modificadores Prevent y Stop en Vue
Los modificadores de eventos en Vue le permiten crear mejores detectores de eventos que se adaptan a las necesidades específicas de su aplicación. Para utilizar estos modificadores de eventos, encadena los modificadores a eventos en Vue.
Por ejemplo:
<forma @enviar.prevenir="manejarEnviar">
<aportetipo="texto"modelo v="texto">
<botóntipo="entregar">Entregarbotón>
forma>
El bloque de código de arriba encadena el prevenir modificador para el evento de envío. El prevenir El modificador se usa comúnmente cuando se trabaja con formularios en Vue.
El prevenir El propósito del modificador es evitar el comportamiento predeterminado del envío de formularios, que es recargar la página. Usando prevenir, Vue puede continuar sus procesos mientras el manejarEnviar El método se encarga del envío del formulario.
Otro ejemplo de un modificador muy útil es el detener modificador de eventos El detener El modificador de eventos evita que un evento se propague más arriba en el árbol DOM.
Por lo general, el evento de un elemento secundario HTML aparece en el árbol DOM, activando cualquier detector de eventos adjunto a los elementos principales. Puedes prevenir esto propagación de eventos con el detener modificador y evitar que el evento active más detectores de eventos.
Para entender cómo el detener modificador detiene la propagación de eventos más arriba en un árbol DOM, considere el bloque de código a continuación:
<cuerpo>
<divisiónidentificación="aplicación">
<división @hacer clic="clic exterior"clase="exterior">
<división @click.stop="clic interno"clase="interno">
<botón @hacer clic="botónClic"clase="botón">Haz click en mibotón>
división>
división>
división>
<guion>
const app = Vue.createApp({
métodos: {
Clic exterior() {
console.log('Clic externo')
},
clic interno() {
console.log('Clic interno')
},
Haga clic en el botón () {
console.log('Clic de botón')
}
}
});
aplicación.mount("#aplicación");
guion>
cuerpo>
El bloque de código anterior tiene tres detectores de eventos adjuntos a tres elementos diferentes. El botón el elemento está dentro del div con el interno clase, mientras que el div con el interno la clase está dentro del div con el exterior clase.
Cada uno de los tres elementos escucha un hacer clic evento y se registra en la consola, el nombre del elemento HTML en el que se hizo clic. A continuación se muestra un estilo CSS de clase adicional para que el bloque de código anterior sea más fácil de entender:
<cabeza>
<estilo>
.exterior {
relleno: 20px;
color de fondo: negro;
}
.interno {
relleno: 20px;
color de fondo: gris;
}
botón {
relleno: 10px;
color de fondo: blanco;
borde: 2px negro sólido;
tamaño de fuente: 16px;
fuente-peso: negrita;
cursor: puntero;
}
estilo>
cabeza>Al ejecutar el programa, la aplicación Vue creada se verá así:
Tenga en cuenta que cuando hace clic en el botón, el programa llama al botónClic y registra un mensaje en la consola. El programa también llama al clic interno método.
Sin embargo, el programa no llama al Clic exterior porque el bloque de código agregó un detener modificador de la clic interno oyente de eventos Esto evita que el evento se propague más arriba en el árbol DOM.
Sin el detener modificador, el programa llamará al botónClic método cuando hace clic en el botón, y el evento continuará propagándose hacia arriba en el árbol, alcanzando el clic interno método y luego el Clic exterior método.
Manejo de eventos en aplicaciones web
Aprendió cómo usar el enlace de eventos en Vue para adjuntar detectores de eventos a elementos y cómo llamar a métodos cuando ocurren eventos. También entendió cómo usar modificadores de eventos para personalizar el comportamiento de los eventos.
Las aplicaciones web se basan en algún tipo de eventos de usuario para llevar a cabo funciones. JavaScript viene incorporado con muchos métodos para capturar y manejar una variedad de estos eventos. Estos eventos ayudan a crear aplicaciones interactivas.