Você sabe o que são diretivas, para o que elas servem e as suas funções? Neste post vamos aprender o que elas representam e executam no Vue.js. Mas, se você prefere video aula, confira abaixo ;-).
De uma forma geral, diretiva nada mais é do que uma indicação, instrução ou norma que deve orientar uma ação ou atividade.
Se quiser saber o que a palavra significa ao pé da letra, é só acessar o Dicionário Online de Português. Por lá, a definição é de que, as diretivas são o
“conjunto de indicações gerais, normas, instruções consoante às quais alguém deve proceder”.
Ou seja, são as regras que permitem a realização de uma tarefa.
Por exemplo, imagine que você tem uma função e lá dentro possuem várias informações embutidas. Para você executar esta função com perfeição você precisa seguir todas as instruções que lá contém. São as diretivas que vão te ajudar nesta tarefa.
Então, podemos dizer que no universo do Vue.js as diretivas são tags especiais adicionadas ao seu elemento HTML e que lá vai se aplicar algum comportamento especial definido pela função.
Ainda não ficou tão claro assim?
Na prática termos algumas diretivas tais como: v-model, v-if, v-else, v-for, entre outras.
Você pode acompanhar a forma de inserção desses comandos nesta videoaula.
O Vue.js tem várias diretivas nativas, como essas do exemplo acima. Mas, você também pode criar a sua própria diretiva, que pode ser customizada para realizar uma ação específica.
Ahh então no HTML temos várias diretivas como o id, certo?
Errado, o id não é uma diretiva, porque ele não está informando nada a div e não tem algo para ser executado ou organizado. Assim, não há uma tarefa definida para ser realizada. Por isso, dizemos que o id é apenas um atributo do HTML para identificar o elemento em questão.
Como identificar uma diretiva?
As diretivas no Vue.js têm características específicas, que nos ajudam na sua identificação. Para reconhecer esse comando é muito simples, você precisa observar o prefixo. Ele precisa começar com o v-, seguido do nome da diretiva, sem espaços.
Uma curiosidade do Vue.js é que você pode fazer a combinação entre várias diretivas. Veremos isso mais a fundo nos próximos capítulos.
Com a interação entre as diretivas, elas produzem uma tarefa diferente. Assim, você pode fazer uma rotina diferente.
Na próxima aula
Agora que nós aprendemos o que são as diretivas, na próxima aula vamos falar com mais detalhes sobre, talvez, as três diretivas mais utilizadas no Vue.js:
- v-show
- v-if
- v-else
Essas são diretivas que permitem que você faça várias tarefas, e, eu acredito que são as mais interessantes e flexíveis do Vue.js.
Então, na próxima aula vamos aprender, na prática, como elas funcionam. E com isso, vocês vão entender bem melhor as diretivas.
Até a próxima!
