Introdução ao Vue.js Conceitos Básicos Parte 3

Introdução ao Vue.js Conceitos Básicos Parte 3

15/09/2018 0 Por Alisson Suassuna

Hoje vamos estudar a fundo como o framework VueJS trabalha a questão do “Vue Eventos”, sabemos que é um assunto de extrema importância para nós desenvolvedores front-end. Se você veio direto para esse artigo, saiba que temos mais dois publicado no blog, parte 1 e parte 2, esse será a continuidade da série Introdução ao Vue.js Conceitos Básicos, recomendo que leia os anteriores para que tenha um maior entendimento dessa tecnologia, vamos ao nosso código base para iniciar nossos estudos sobre eventos.

Vue Evento v-on:click

Vamos entender juntos o que acabamos de escrever em nosso código, primeiro criamos um elemento <button> com o texto “Mais”. Na minha vue instancce criamos um método “addCounter” que seleciona o counter que está em data e incrementa mais 1 ao dado, atrelamos esse método ao nosso <button> com a diretiva v-on:click. Então quando clicarmos no elemento <button> o método “addCounter” é invocado e incrementa mais 1 ao nosso dado counter. O VueJS nos possibilita fazer a mesma tarefa de maneiras diferentes, então podemos neste caso escrever menos códigos para realizar essa mesma tarefa veja.

Vue Eventos

Vue Eventos

Quero deixar bem claro, não há nenhuma diferença em relação aos dois modos de realizar eventos, só uma redução de escrita de código, perceba que no segundo elemento que criamos escrevemos um código JavaScript é possível? Sim na própria chamada da diretiva click podemos escrever código, mas tenha bastante cuidado esse recurso deve ser utilizado com bastante prudência, devemos sempre escrever código com legibilidade acima de tudo, recomento todos lerem um livro chamado código limpo, ele ter dará uma visão bem mais ampla sobre o assunto. Caso tenha alguma dúvida sobre, deixa nos comentários.

Vue Eventos @mousemove

Vue Eventos

Criamos um elemento <div> em nosso HTML e atrelamos a essa <div> o evento @mousemove, quando o usuário passar o mouse nesta área onde está nossa <div> esse evento será invocado, na vue instance criamos o método “updatePosition” e nela atribuímos a posição do eixo X e Y do mouse, para os dados que criamos em data “x” e “y”.

Modificadores de Eventos

Os modificadores de eventos são um recurso bem interessante do Vue.js, escrevemos o nome do evento em seguida de (“.”) “stop” vamos ver na prática.

Vue Eventos

Vue Eventos

Observe que o evento é parado assim que o mouse se move para o nosso elemento <span> “Pare eventos”. Esse modificador nos auxilia em determinadas funções onde não queremos que o evento se propague pelos elementos filhos, sem a necessidade de criarmos uma segunda função com tal característica.

Evento de Teclado @keyup

Vue Eventos

Vue Eventos

Criamos um elemento <input> para escrevemos algo, e neste elementos associamos o evento @keyup.enter ou seja quando nosso usuário digitar algo e pressionar a tecla do teclado enter a função alerta() será invocada, lembrando o keyp é um evento que captura textos, e o enter é um modificador de evento que facilitar e muito nossa vida, pois com eles evita de criamos mais e mais funções em nosso código.

Dia do programador

Vue Eventos

Recomendações de Cursos e Livros

Curso Introdução ao Vue JS 2 – Udemy

Curso muito bom galera, recomendo demais para aqueles que querem sair do básico e avançar um pouco mais seus conhecimento no VueJS.


CLIQUE AQUI PARA VISUALIZAR O CURSO

Javascript. O Guia Definitivo

Esse livro é muito bom galera, muito completo tenho ele a algum tempo e me ajudou muito a entender o JavaScript de verdade, vale muito apena o investimento.

CLIQUE AQUI PARA VISUALIZAR O LIVRO


CLIQUE AQUI PARA VISUALIZAR O LIVRO