Se você perdeu a primeira parte desta série, não deixe de conferir:

• Vuejs e suas bases – Parte 01

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, a partir do JavaScript eu consigo consultar as tags que têm essa propriedade definida em 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 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 subsequentes, 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 instância do Vuejs – você pode adicionar a diretiva v-once.

Neste exemplo, há 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 pressionarmos F5, ambos estarão com o valor ‘Ola, Dev Vuejs!’ – esse é o comportamento padrão. Sempre que existe uma mudança no valor da instância, 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ão consumidos 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 do html o html 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-html em 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-on em sua forma abreviada: @.

Neste exemplo, vamos criar um botão que 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 no button. Trataremos esse evento click para que faça essa soma. A diretiva v-on vai interceptar o evento, que nesse caso é o click, e 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 span, o valor das variáveis de X e Y serão atualizadas de acordo com a posição do mouse.

No template vamos colocar 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 diretiva v-on. Acrescentando o evento :mousemove e o método que queremos chamar – nesse caso nomeei como 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 20:

Também criaremos um método add, passando como parâmetro value que usaremos para fazer o acréscimo, e pegando o contador faremos 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 foi gerado. A partir do click do button 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-on escutar 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 quiséssemos 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 desta 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.

Se este artigo foi útil, compartilhe.

Até os próximos artigos!