Como lidar com eventos no Vue
Aprenda como aprimorar o tratamento de eventos com a diretiva v-on do Vue.
Ouvir os eventos do usuário é parte integrante de qualquer aplicativo web responsivo, e os aplicativos Vue não são exceção. O Vue vem desenvolvido com uma maneira simples e eficiente de lidar com eventos com sua diretiva v-on.
O que é vinculação de eventos no Vue?
A vinculação de evento é um recurso do Vue.js que permite anexar um ouvinte de evento a um elemento Document Object Model (DOM). Quando ocorre um evento, o ouvinte de evento aciona uma ação ou resposta em seu aplicativo Vue.
Você pode conseguir vinculação de eventos no Vue com a diretiva v-on. Esta diretiva permite que seu aplicativo ouça eventos do usuário, como eventos de clique, entrada ou tecla.
Para anexar um ouvinte de evento a um elemento usando v-on, adicione o nome do evento como parâmetro à diretiva:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
O bloco de código acima mostra um exemplo de aplicativo Vue que escuta um evento clique. O bloco de código usa um botão para incrementar o valor do contador na propriedade data da instância Vue em um.
O bloco de código acima vincula a expressão JavaScript counter++ ao evento click do botão com a diretiva v-on. Vue usa o caractere @ como abreviação no lugar da diretiva v-on devido ao uso frequente de v-on:
<button @click="counter++">Click me</button>
A vinculação de eventos no Vue não se limita a eventos de clique. Vue lida com outros eventos, como eventos de pressionamento de tecla, eventos de passagem do mouse e muito mais.
Para vincular qualquer um desses eventos à diretiva v-on, substitua o evento click pelo nome do evento desejado:
<button @keydown.enter="counter++">Click me</button>
O código acima configura um ouvinte de evento no botão que escuta o evento keydown. Quando qualquer tecla é pressionada enquanto o botão está em foco, o Vue avalia a expressão counter++.
Vinculando eventos com métodos no Vue
Na maioria dos aplicativos Vue, você pode lidar com lógicas mais complexas com base na ocorrência de eventos específicos. Eventos e métodos trabalham lado a lado para executar ações do aplicativo com base em um evento.
A propriedade de métodos no objeto Options do Vue contém funções importantes que seu aplicativo Vue precisa para melhorar a reatividade. Com a propriedade de métodos no Vue, você pode lidar com lógica complexa baseada em eventos.
Aqui está um exemplo de aplicativo Vue que mostra eventos manipulados pela propriedade methods:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
O aplicativo Vue acima mostra como vincular eventos a métodos. O aplicativo possui dois botões nos quais os usuários podem clicar para aumentar ou reduzir o valor do contador na propriedade de dados.
O aplicativo consegue isso com a diretiva @click. A diretiva @click aponta para as funções na propriedade de métodos para manipular o valor do contador.
Ao vincular um argumento ao evento click, você pode personalizar os métodos de incremento e redução para adicionar ou reduzir o valor do contador com base no argumento passado para o método.
Igual a:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
Este bloco de código se estende ao aplicativo Vue anterior para permitir a passagem de argumentos para os métodos vinculados ao ouvinte de evento de clique no botão.
Os métodos increment e redução na instância Vue recebem um argumento num para aumentar ou reduzir a propriedade do contador.
Este exemplo mostra como você pode trabalhar com argumentos ao vincular métodos a eventos no Vue. Vincular métodos a eventos pode ajudar a tornar os aplicativos Vue mais interativos.
Explorando os modificadores Prevent e Stop no Vue
Os modificadores de eventos no Vue permitem criar melhores ouvintes de eventos que atendem às necessidades específicas do seu aplicativo. Para utilizar esses modificadores de eventos, você encadeia os modificadores a eventos no Vue.
Por exemplo:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
O bloco de código acima encadeia o modificador prevent ao evento submit. O modificador prevent é comumente usado ao trabalhar com formulários no Vue.
O objetivo do modificador prevent é evitar o comportamento padrão do envio do formulário, que é recarregar a página. Usando prevent, o Vue pode continuar seus processos enquanto o método handleSubmit cuida do envio do formulário.
Outro exemplo de modificador muito útil é o modificador de evento stop. O modificador de evento stop impede que um evento se propague mais acima na árvore DOM.
Normalmente, o evento de um elemento filho HTML surge na árvore DOM, ativando qualquer ouvinte de evento anexado aos elementos pai. Você pode impedir a propagação desse evento com o modificador stop e evitar que o evento acione outros ouvintes de eventos.
Para entender como o modificador stop interrompe a propagação de eventos em uma árvore DOM, considere o bloco de código abaixo:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
O bloco de código acima possui três ouvintes de eventos anexados a três elementos diferentes. O elemento button está dentro da div com a classe inner, enquanto a div com a classe inner está dentro da div com a classe outer classe.
Cada um dos três elementos escuta um evento clique e registra no console o nome do elemento HTML clicado. Abaixo está um estilo CSS de classe adicional para tornar o bloco de código acima mais fácil de entender:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
Ao executar o programa, o aplicativo Vue criado ficará assim:
Observe que quando você clica no botão, o programa chama o método buttonClick e registra uma mensagem no console. O programa também chama o método innerClick.
Entretanto, o programa não chama o método outerClick porque o bloco de código adicionou um modificador stop ao ouvinte do evento innerClick. Isso impede que o evento se propague na árvore DOM.
Sem o modificador stop, o programa chamará o método buttonClick quando você clicar no botão, e o evento continuará se propagando pela árvore, alcançando o innerClick método e depois o método outerClick.
Tratamento de eventos em aplicativos da Web
Você aprendeu como usar a vinculação de eventos no Vue para anexar ouvintes de eventos a elementos e como chamar métodos quando os eventos ocorrem. Você também entendeu como usar modificadores de eventos para personalizar o comportamento do evento.
Os aplicativos da Web dependem de alguma forma de eventos de usuário para executar funções. O JavaScript vem integrado com vários métodos para capturar e lidar com uma variedade desses eventos. Esses eventos ajudam na construção de aplicativos interativos.