Vuejs e suas bases — Parte 2

Silvana Lima
May 22 · 8 min read

Se você perdeu a primeira parte dessa série, dá uma olhadinha aqui: Vuejs e suas bases — Parte 1

DIRETIVAS

Diretivas são atributos especiais com o v-prefixo. Espera-se que os valores dos atributos diretivos sejam uma única expressão JavaScript (com exceção de v-for). O trabalho de uma diretiva é aplicar efeitos colaterais de maneira reativa ao DOM quando o valor de sua expressão é alterado.

Ou seja, diretiva é uma propriedade personalizada que não é nativa do html , só que o html5 permite que você adicione novas propriedades. Nesse caso, elas são interpretadas pelo Vue, e o Vue identifica como Diretivas.

Se eu quisesse por exemplo, criar uma diretiva personalizada svl-bind , e até possuir um valor, e a partir do javascript eu consigo consultar as tags que têm essa propriedade definida na sua estrutura.

O Vue usa um conjunto de propriedades personalizadas usando esse recurso do html5 , que você consegue inserir propriedades que não existem, para que assim possa fazer algum tipo de processamento usando javascript. Então, basicamente o Vue detecta quais são as diretivas usadas nas tags e faz com que esses valores sejam interpretados e substituídos pelos valores correspondentes a Vue instância que você definiu esses dados.

V-ONCE

Renderize o elemento e o componente apenas uma vez . Em re-renderizações subseqüentes, o elemento / componente e todos os seus filhos serão tratados como conteúdo estático e ignorados. Isso pode ser usado para otimizar o desempenho da atualização.

O v-once evita a re-renderização, basicamente você usa se tem um trecho de html que não precisa ser atualizado cada vez que ocorre uma mudança nos dados da instancia do Vuejs, você pode adicionar a diretiva v-once

Nesse exemplo, tem um atributo msg com o texto ‘Ola, Dev’, depois temos um método que pega esse ‘Ola, Dev’ e substitui para ‘Ola, Dev Vuejs!’

Neste caso, se a gente der F5 ambos estarão com o valor ‘Ola, Dev Vuejs!’, isso é o comportamento padrão. Sempre que existe uma mudança no valor da instancia, a view é automaticamente atualizada.

Mas se você quiser que o valor de msg seja renderizado apenas uma vez, e não mude mais mesmo que haja mudança, você pode usar a diretiva v-once

Pronto, ele não vai mais ficar monitorando as mudanças em <span> , ele vai resolver apenas a primeira vez! Dessa forma, será consumido menos recursos, isso porque o Vuejs para de se preocupar em monitorar esse trecho.


V-HTML

Atualiza o elemento innerHTML. Observe que o conteúdo é inserido como HTML simples - eles não serão compilados como modelos Vue . Se você estiver tentando compor modelos usando v-html, tente repensar a solução usando componentes.

Se em algum momento bastante especifico você precisar imprimir dentro dohtml ohtml puro.

Neste caso podemos usar a diretiva v-html

Para seu uso é bem simples, podemos definir em data htmlPure:"<div><h1>Sou um Html puro!" e no template <div v-html="htmlPure"></div>

Apenas um lembrete, cuidado com o uso dessa diretiva porque renderizar dinamicamente o html sem necessidade real em seu site pode ser perigoso, pois pode facilmente levar a ataques XSS. Use somente v-htmlem conteúdo confiável e nunca em conteúdo fornecido pelo usuário.


EVENTOS

COMO ESCUTAR EVENTOS

Podemos usar a diretiva v-on para ouvir eventos DOM e executar JavaScript quando eles são acionados.

Dica: Você também pode usar v-onem sua forma abreviada @

Nesse exemplo, vamos criar um botão que vai ter a funcionalidade de incrementar +1 ao contador.

Em data vamos definir um contador inicializado em 0

Criaremos também o método para fazer essa soma

Por fim, no template colocaremos a interpolação do contador dentro do span e nobutton trataremos esse evento clickpara que faça essa soma. A diretiva v-onvai interceptar o evento, que nesse caso é o clicke passaremos a função sum() em seu valor.


COMO OBTER DADOS DO EVENTO

Pra entender como conseguimos obter dados do evento, faremos um exemplo que quando passar o mouse no spano valor das variáveis de X e Y serão atualizadas de acordo com a posição do mouse.

No template vamos por um span com o X e Y já com a interpolação.

Em data , precisamos criar o X e Y, iniciaremos com o valor 0

Para pegar os valores de X e Y, precisamos do evento mousemove

Para interceptar esse evento, faremos da mesma forma que já aprendemos, usando a diretivav-on . Acrescentando o evento :mousemove e o método que queremos chamar, nesse caso nomeei de positionXY

Como observamos abaixo, ele gera o evento para cada movimento, e dentro do MouseEvent, temos o ClientX e ClientY que são os valores que pegaremos.

Agora faltou pedir para pegar essas duas propriedades, e para isso faremos assim


PASSANDO PRÓPRIOS ARGUMENTOS COM EVENTOS

Vamos passar como parâmetro um valor, que será o passo que vamos usar para incrementar ao valor dentro do contador, vamos
passar o valor de 20

E criar um método add passando como parâmetro value que usaremos para fazer o acréscimo, e pegando o contador e fazemos uma atribuição aditiva passando esse value

Ou seja, passamos diretamente lá na chamada o parâmetro que queremos e que será usado para incrementar o contador.

No momento que passamos um parâmetro personalizado, o evento não é mais passado por padrão.

Caso precise saber qual evento está sendo passado, você pode usar a palavra reservada $event , essa palavra nos diz qual evento que foi gerado a partir do click do button vai ser passado como parâmetro para a função.


MODIFICADORES DE EVENTOS

É uma necessidade muito comum chamar event.preventDefault()ou fazer parte dos event.stopPropagation()manipuladores de eventos. Embora possamos fazer isso facilmente dentro de métodos, seria melhor se os métodos pudessem ser puramente sobre lógica de dados em vez de ter que lidar com detalhes de evento DOM.

Imagine que você tem a seguinte situação:

Um trecho de código envolto em uma tag a href e você precisa que um trecho em especifico que está dentro desse código não pegue esse link, mesmo que ele esteja envolto nele.

Você pode usar o modificador de evento .prevent e irá prevenir o comportamento default, ou seja, vai impedir que quando clicar no trecho com o modificador de evento .prevent vá para a outra página — tenha seu comportamento default.


EVENTOS DE TECLADO

Ao escutar eventos de teclado, geralmente precisamos verificar se há chaves específicas. O Vue permite adicionar modificadores de chave para v-onescutar os principais eventos.

KEYUP

Esse trecho nos diz o seguinte: toda vez que você clicar na tecla e soltar, ele vai chamar o método associado, nesse caso o CallAlert

O método CallAlert vai chamar um alerta

Se a gente quisesse colocar um modificador de acesso, por exemplo um modificador de acesso para toda vez que a tecla enter for pressionada disparar o evento.

No método, farei uma pequena alteração para conseguir mostrar que a ação foi feita a partir da tecla enter

Eu também poderia colocar para quando fosse pressionado junto, por exemplo o enter + alt


Bem, chegamos ao final dessa segunda parte.

Conclusão

Chegamos ao final da segunda parte sobre a base/fundamentos do Vuejs, falamos um pouco sobre diretivas, eventos e modificadores de eventos.

Até os próximos artigos…


Se esse artigo foi útil , fortalece com 👏 e ajude a chegar em mais pessoas.

Silvana Lima

Written by

Software Developer at Band | Technical Writer | http://silvanavlima.github.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade