7. Manipulação de eventos (Introdução ao Vue.js)

Nesse tópico vamos aprender como ouvir eventos do DOM para que possamos invocar métodos.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Além disso, se você ficou com dúvidas sobre como resolver o desafio do 6. Interligações em formulários. Segue o código do desafio resolvido no Github para você entender :)

Manipulação de eventos

Vamos aprender como ouvir eventos do DOM para que possamos invocar métodos.

Objetivo

Vamos adicionar um botão chamado reset que quando for clicado vai limpar o texto dos inputs.

Problema

Nós precisamos de um botão reset para ouvir eventos de click, para então acionar um método que vai limpar o formulário.

Solução

Vamos adicionar o botão com a diretiva v-on do Vue que permite ouvir eventos do DOM, e invocar um método nosso que vai limpar o formulário.

Adicionar o botão

Vamos adicionar o botão abaixo dos inputs

Nós estamos usando a diretiva v-on abreviada = @para ouvir o evento de click e acionar o método resetInputs()

Outros tipos de eventos

https://developer.mozilla.org/pt-BR/docs/Web/Events

Propriedade methods

A instância Vue tem uma propriedade opcional para seus métodos. Então nós vamos adicionar o método resetInputs que realiza a ação de limpar o formulário.

Podemos adicionar o código abaixo do nossa computed: {}

ES6 — Sintaxe

Resultado

7. Manipulação de eventos — (O que aprendemos)

• A diretiva v-on é usada para permitir que os elementos ouçam os eventos do DOM;
• A abreviação da diretiva v-on é @ . Ex: @click="method", @focus="method"
• Você pode especificar o tipo de evento que quer ouvir (click, mouseover, qualquer outro evento do DOM) para invocar seus métodos.

Próximo post

8. Renderização de listas (Introdução ao Vue.js)

Referências

Event Handling - Vue.js