A manipulação de eventos é uma parte importante da interação com os usuários e da alteração do estado de um aplicativo no Vue.js. O Vue.js fornece várias maneiras de lidar com eventos, incluindo manipuladores de eventos inline, métodos e modificadores de eventos.
Aqui estão alguns eventos comuns no Vue.js
1. click evento
Este evento é acionado quando um elemento clicável, como um botão ou um link, é clicado. É comumente usado para executar ações ou acionar funções quando um usuário interage com o elemento.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input evento
Este evento é acionado quando o valor de um input elemento muda. É comumente usado com a v-model diretiva para vincular o input valor a uma propriedade de dados no componente do Vue. Isso permite que você atualize e rastreie de forma reativa as alterações no input valor.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change evento
Este evento é acionado quando o valor de um elemento de formulário, como um menu suspenso de seleção ou caixa de seleção, é alterado. É comumente usado para executar ações ou atualizar dados com base na opção selecionada ou no estado verificado do 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 é acionado quando um formulário é enviado, seja clicando em um submit botão ou pressionando Enter dentro de um input campo. É comumente usado para lidar com envios de formulários, validar user input e executar ações como fazer solicitações de API ou salvar dados.
<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 é acionado quando uma tecla é liberada após ser pressionada. É comumente usado para executar ações em resposta ao teclado input, como filtrar uma lista de itens ou acionar uma funcionalidade de pesquisa.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown evento
Este evento é acionado quando uma tecla é pressionada. É comumente usado para ouvir combinações de teclas específicas ou executar ações enquanto uma tecla é pressionada, como navegar por uma apresentação de slides ou controlar um jogo.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover evento
Este evento é acionado quando o ponteiro do mouse é movido sobre um elemento. É comumente usado para mostrar informações adicionais ou fornecer feedback visual ao passar o mouse sobre um elemento.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout evento
Este evento é acionado quando o ponteiro do mouse é movido para fora de um elemento. É comumente usado para ocultar ou modificar elementos quando o mouse não está mais sobre eles.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll evento
Este evento é acionado quando um elemento é rolado. É comumente usado para implementar recursos como rolagem infinita, carregamento lento de conteúdo ou atualização de elementos da interface do usuário com base na scroll posição.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus evento
Este evento é acionado quando um elemento recebe focus, normalmente quando é clicado ou quando o usuário navega até ele usando o teclado. É comumente usado para executar ações ou fornecer feedback visual quando um input elemento ou ganha focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Estes são apenas alguns exemplos básicos de eventos no Vue.js. Você pode personalizar as funções de gerenciamento de eventos para atender às necessidades específicas do seu projeto.