Neste artigo falarei sobre as diretivas no Vue e vou demonstrar exemplo de como utilizar. Diretivas são atributos especiais com o prefixo v-.

Espera-se que os valores atribuídos às diretivas sejam uma simples expressão Javascript, mas com a exceção do v-for, que será discutido posteriormente.

O trabalho de uma diretiva é aplicar reativamente efeitos colaterais ao DOM, ou seja, como resultado realizar algum efeito quando o valor da expressão é modificado.

Caso não tenha acompanhado o que já falamos sobre, recomendo a leitura do artigo Vue.Js – Iniciando com o Framework.

Aqui, a diretiva v-if irá remover/inserir o elemento <p> baseado na veracidade do valor da expressão habilitar.

Parâmetro como diretiva

Algumas diretivas podem aceitar um parâmetro, denotado pelo símbolo de dois pontos após a diretiva.

Por exemplo, a diretiva v-bind é utilizada para atualizar um atributo HTML reativamente:

Aqui href é o parâmetro, que informará à diretiva v-bind para interligar o atributo href do elemento ao valor da expressão url, mas de de forma reativa.

Atualizando nosso exemplo, que pode ser acessado em meu repositório no GitHub, deve exibir uma tela parecida com a exibida abaixo:

Abreviações para v-bind no Vue

O prefixo v- identifica os atributos específicos do Vue nos templates que iremos construir em nossa aplicação.

Isso é útil quando se está utilizando o Vue para aplicar comportamento dinâmico em HTML existente, mas você pode achar um pouco verboso se precisar usar frequentemente.

O Vue também oferece abreviações especiais para as duas diretivas mais utilizadas, a saber v-bind e o v-on. Veja:

Concluindo

Simples não? Como sempre, recomendo que consulte a documentação do Vue e pra ser mais específico à sessão de Diretivas.

Ps.: todos estes exemplo estão disponíveis em meu repositório chamado Vuejs do GitHub, mas caso tenha alguma dúvida, deixa aqui nos comentários.

Até a próxima!