El manejo de eventos es una parte importante de la interacción con los usuarios y el cambio del estado de una aplicación en Vue.js. Vue.js proporciona varias formas de manejar eventos, incluidos controladores de eventos en línea, métodos y modificadores de eventos.
Estos son algunos eventos comunes en Vue.js
1. click evento
Este evento se activa cuando se hace clic en un elemento en el que se puede hacer clic, como un botón o un enlace. Se usa comúnmente para realizar acciones o activar funciones cuando un usuario interactúa con el elemento.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input evento
Este evento se activa cuando input cambia el valor de un elemento. Se usa comúnmente con la v-model directiva para vincular el input valor a una propiedad de datos en el componente de Vue. Esto le permite actualizar y realizar un seguimiento de los cambios en el input valor de forma reactiva.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change evento
Este evento se activa cuando se cambia el valor de un elemento de formulario, como un menú desplegable de selección o una casilla de verificación. Se usa comúnmente para realizar acciones o actualizar datos según la opción seleccionada o el estado marcado del elemento.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. submit evento
Este evento se activa cuando se envía un formulario, ya sea haciendo clic en un submit botón o presionando Intro dentro de un input campo. Se usa comúnmente para manejar envíos de formularios, validar usuarios input y realizar acciones como realizar solicitudes de API o guardar datos.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. keyup evento
Este evento se activa cuando se suelta una tecla después de haberla presionado. Se usa comúnmente para realizar acciones en respuesta al teclado input, como filtrar una lista de elementos o activar una función de búsqueda.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown evento
Este evento se activa cuando se presiona una tecla. Se usa comúnmente para escuchar combinaciones de teclas específicas o realizar acciones mientras se mantiene presionada una tecla, como navegar a través de una presentación de diapositivas o controlar un juego.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover evento
Este evento se activa cuando el puntero del mouse se mueve sobre un elemento. Se usa comúnmente para mostrar información adicional o proporcionar comentarios visuales al pasar el mouse sobre un elemento.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout evento
Este evento se activa cuando el puntero del mouse se mueve fuera de un elemento. Se usa comúnmente para ocultar o modificar elementos cuando el mouse ya no está sobre ellos.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll evento
Este evento se activa cuando se desplaza un elemento. Se usa comúnmente para implementar funciones como el desplazamiento infinito, la carga diferida de contenido o la actualización de elementos de la interfaz de usuario en función de la scroll posición.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus evento
Este evento se activa cuando un elemento recibe focus, normalmente cuando se hace clic en él o cuando el usuario navega hasta él con el teclado. Se usa comúnmente para realizar acciones o proporcionar información visual cuando un input elemento gana focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Estos son solo algunos ejemplos básicos de eventos en Vue.js. Puede personalizar las funciones de gestión de eventos para que se ajusten a las necesidades específicas de su proyecto.