Ao construir um site dinâmico, você precisa ouvir diferentes tipos de eventos. Para conduzir esses tipos de interações em nosso site ou aplicativo da web, podemos usar o gerenciamento de eventos.
Existem várias maneiras diferentes de lidar com eventos no Vue, mas a melhor solução dependerá do tipo de evento que você está ouvir, como você deseja reagir ao evento e o que você espera alcançar com o evento.
Por exemplo, se um usuário clicar em um botão, enviar um formulário ou apenas mover o mouse, você pode adicionar uma reação, como mostrar uma animação ou chamar uma função. Adicionar esses tipos de eventos fornece uma UX rica para o usuário final.
Neste artigo, vamos cobrir os fundamentos da manipulação de eventos no Vue e aprenderemos como aplicar a manipulação de eventos em um ambiente real aplicativo-world. Aprenderemos como alterar ou prevenir o comportamento de um elemento ouvindo o evento, interceptando-o e manipulando-o usando os métodos descritos abaixo.
Para entender este tutorial, você deve estar familiarizado com eventos em JavaScript . Vamos começar!
Crie eventos embutidos
Primeiro, vamos examinar um caso de uso comum de manipulação de eventos no Vue, criando eventos embutidos. Com a diretiva nativa v-on do Vue, você pode ouvir os eventos DOM nativos do navegador. No bloco de código abaixo, ouviremos um evento de clique em um botão e, em seguida, alteraremos o texto do botão:
Como alternativa, podemos chamar uma função para mostrar um alerta usando a diretiva v-on:
Em ambos os exemplos acima, adicionamos a diretiva v-on ao elemento DOM para interceptar seu evento:
Também adicionamos um argumento ao v-na diretiva, que é o nome do evento que queremos tratar. Em nosso caso, o argumento é clique.
Em seguida, vincularemos uma expressão à diretiva, que normalmente é um método que você deseja usar para tratar o evento. Chamamos nosso eventHandler e usamos uma abreviatura para a diretiva v-on:
Eventos comuns no Vue
Em nosso exemplos até agora, ouvimos eventos que ocorrem onclick. Vamos revisar alguns outros tipos de eventos populares:
Eventos de mouse
onclick ondragstart ondrop dblclick onmousedown onmouseup mouseover
Eventos de teclado
onkeydown onkeypress onkeyup
Formulário HTML e eventos de objeto
onchange onsubmit onreset onscroll onerror
Existem mais eventos descritos na documentação do Vue que você pode escolher ao projetar seu aplicativo. Você deve revisar e experimentar com eles para garantir que seu design seja o mais intuitivo possível para o usuário.
Chamar elementos em v-on
No Vue, você pode usar métodos chamados em a diretiva v-on do elemento, que conterá uma lógica complexa que será executada sempre que o evento for disparado. Por exemplo, vamos considerar um alerta disparado ao clicar:
No bloco de código acima, passamos um mensagem para o método showAlert diretamente da diretiva v-on. No entanto, poderíamos melhorar esse código adicionando mais contexto à função. No bloco de código abaixo, vamos atualizar a mensagem exibida por showAlert conciliando Hello com qualquer texto passado na função showAlert:
Agora que sabemos como interceptar e criar um novo evento, vamos aprender como alterar e prevenir o comportamento padrão de um evento.
Modifique e prevenir eventos
No Vue, podemos usar modificadores de evento para mudar o comportamento de um evento ou prevenir o evento padrão.
Por exemplo, digamos que temos um formulário contendo um botão. Por padrão, se o usuário clicar no botão ou pressionar a tecla Enter, o formulário será enviado e a página será atualizada. Em aplicativos de página única, queremos evitar o recarregamento total da página, então usaremos AJAX para enviar o formulário.
Impedir o comportamento padrão
Para evitar o comportamento padrão de um evento, nós pode chamar o modificador.prevent no Vue, que chama o método event.preventDefault () nativo. Esta série de etapas evita que o evento recarregue a página após o formulário ser enviado.
Por outro lado, o modificador.stop interrompe o comportamento padrão do evento DOM completamente chamando event.stopPropagation (). Por exemplo, no código a seguir, usamos os modificadores.stop e.submit no envio da diretiva v-on:
Ambos os métodos realizam uma tarefa semelhante e são usados juntos. Você pode usar.prevent para interceptar o comportamento padrão de um formulário e usar.stop para prevenir borbulhamento de evento em um elemento pai.
Alterar o comportamento padrão
Para alterar o comportamento padrão, vamos examinar o exemplo no bloco de código abaixo. Por padrão, quando um usuário clica no link Click Me, ele vê um alerta. Em seguida, o Google será aberto em uma nova guia:
No entanto, se não quisermos abrir o link após mostrar o alerta, podemos usar o modificador.prevent, conforme mostrado abaixo:
O modificador.prevent impede que o link seja aberto e executa apenas o método atribuído ao marcação. Agora, clicar no botão enviará uma mensagem de alerta sem abrir o link.
Modificadores de eventos adicionais
Em nossos exemplos, usamos o modificador.prevent no Vue. Vamos dar uma olhada em alguns outros modificadores populares e suas funções:
.self: aciona o evento apenas se event.target for o próprio elemento.once: evita que o evento seja executado mais de uma vez.keyup: escuta os eventos do teclado.capture: manipula eventos que visam um elemento interno antes de manipular o elemento que disparou o evento
Modificadores de evento de chave
Os modificadores de evento de chave no Vue oferecem amplo suporte para ouvir o teclado. Por exemplo, podemos usar modificadores de tecla para ouvir eventos onde teclas específicas são pressionadas. Observe que os nomes-chave com várias palavras geralmente são escritos no caso de kebab.
No exemplo abaixo, estamos ouvindo o evento de tecla enter:
Quando o elemento de entrada acima estiver focado, pressionar o botão Enter irá acionar a função de alerta.
O modificador de evento de tecla segue a estrutura v-on.keyevent.keyname. Você também pode aninhar vários nomes de chave como v-on.keyup.ctrl.enter.
Criar eventos personalizados
No Vue, o componente pai pode passar dados para seus componentes filhos por meio do atributo prop, no entanto, um componente filho não pode enviar dados ao componente pai. No entanto, podemos usar $ emit para fazer o componente pai ouvir o componente filho e permitir que o componente filho passe dados para o componente pai.
No exemplo abaixo, App.vue, que contém o componente pai. componente, está ouvindo Child.vue, o componente filho:
//App.vue (componente pai)
//Child.vue (componente filho)
Conclusão
Embora o tratamento de eventos possa parecer direto, um manipulador de eventos incorreto ou incompleto pode bagunçar seu código ou até mesmo interromper seu aplicativo. Neste tutorial, aprendemos várias maneiras diferentes de lidar com eventos em um aplicativo Vue.
Cobrimos a adição de eventos inline com a diretiva v-on e revisamos alguns dos diferentes tipos de eventos que podemos usar para personalizar nosso aplicativo. Também aprendemos como prevenir ou alterar o comportamento padrão de um evento usando modificadores. Por fim, cobrimos como alterar a comunicação entre nossos componentes filho e pai usando $ emit.
