domingo, 25 de novembro de 2018

Vue Parte 3 - Methods e a Diretiva v-on

No post anterior dessa série, parte 2, vimos mais detalhes sobre a instância de Vue. Utilizamos três propriedades: el, data e template. Neste post estudaremos a diretiva v-on e o uso de métodos na manipulação de eventos.

Diretivas


Diretivas são atributos especiais que adicionamos ao código html para estendê-lo (leia-se fazer algo a mais com ele). Se você vem do Angular, certamente isso soará bem familiar pra você. Assim como em Angular, Vue possui um conjunto de diretivas built-in (iniciadas com v- ), e permite que você defina suas próprias diretivas (custom directives).

Resolvi juntar o estudo das diretivas com alguma outra propriedade da instância de Vue, pois acredito que o entendimento fica melhor dessa forma. Neste artigo iremos ver a diretiva v-on e como usá-lo em conjunto com methods.

Diretiva v-on


A diretiva v-on permite que se vincule um event listener (leia-se um método) a um evento do DOM. A sintaxe de v-on é a seguinte: v-on:evento="methodHandler". O evento pode ser qualquer evento DOM válido como: click, mouseover, keypress, input, etc. Vue passará automaticamente para o methodHandler o evento DOM original e uma propriedade extra: target, que aponta para o elemento que gerou o evento.

Vue methods


Vue possui uma propriedade especial onde definimos o conjunto de métodos que podem ser invocados pela aplicação. Vejamos um primeiro exemplo.


Usamos uma expressão de interpolação para invocar o método gerarMensagem. Embora possível, não é muito comum executar métodos dessa maneira. Os métodos normalmente são usados como event handlers. Vejamos então como combinar a diretiva v-on com methods para manipulação de eventos.

Vue passou o objeto event para o método e usamos a propriedade target.value para recuperar o valor do elemento input. É possível passar uma expressão inline como parâmetro de v-on, para algumas situações mais simples pode ser bastante útil.

Vue permite a utilização de uma versão simplificada de v-on. Você pode trocar v-on por @. É apenas açúcar sintático, mas é bastante popular entre os desenvolvedores. Assim, no lugar de v-on:click você pode usar @click.

Modificadores de Evento


Em uma aplicação SPA apenas um documento HTML é carregado. Todas as requisições de conteúdo seguintes são feitas via Javascript. É muito comum, por exemplo, desabilitar o comportamento padrão do submit dos formulários HTML, já que por padrão eles requisitam o recarregamento da página, o que é algo indesejado em uma SPA.

Vejamos passo a passo como alterar o comportamento padrão de um evento. Primeiro, vejamos um exemplo de um formulário bem simples, ele tem apenas um botão de submit que incrementa um contador.


Ao abrir essa página e apertar o botão Incrementar, você notará que o contador é incrementado e logo em seguida volta para o estado inicial. Isso ocorre justamente porque a página é completamente recarregada, fazendo com que a aplicação seja reiniciada. Agora vamos alterar esse comportamento usando o evento que é passado como parâmetro para o método increment.

Agora o formulário está funcionando. Porém, tivemos que alterar a assinatura do método para receber o evento. Como falei anteriormente, essa é uma tarefa corriqueira em SPA, então Vue disponibiliza uma maneira mais simples de fazer isso. São os Modificadores de Eventos. Vamos ver apenas o .prevent nesse artigo, mas você pode clicar aqui pra ver todos os modificadores suportados.


Nosso método ficou mais limpo e sem o acoplamento com o evento DOM. Além dos modificadores de evento, Vue possui também Modificadores de Teclado, facilitando a criação de métodos listeners para eventos de pressionamento de teclas específicas (delete, tab, space, etc). Com isso encerramos essa 3ª parte. É interessante que você consulte a documentação para ver mais detalhes sobre os modificadores. Até o próximo artigo!

Nenhum comentário:

Postar um comentário