Phenquestions
Um framework visa fornecer recursos que tornem o processo de desenvolvimento mais fácil e rápido para os desenvolvedores. Vue.js é uma estrutura JavaScript enriquecida com recursos que fornece muitas funções e diretivas integradas para tornar o processo de desenvolvimento. Mas, deve haver alguns cenários em que você precisa de alguma funcionalidade que não está disponível pelo framework, então você deve construir seu próprio.
Nesta postagem, aprenderemos e daremos uma olhada nas diretivas integradas fornecidas pelo Vue.framework js, e também aprenderemos a criar e usar nossa própria diretiva Vue personalizada.
Diretriz
As diretivas são atributos que você pode vincular aos elementos DOM, prefixados pela cláusula “v-” que ajuda a conhecer a biblioteca que é um tipo especial de sintaxe usada para realizar algumas tarefas. As diretivas geralmente são usadas para manipulação direta de DOM. Algumas das diretivas mais usadas e famosas são "v-if", "v-for" e "v-show".
As diretivas são usadas para aplicar efeitos em elementos DOM, mas reativamente. Vamos entender com um exemplo:
Diretiva “v-if”
Você pode ver o texto.
Na tag acima, o “v-if” é uma diretiva que excluirá ou adicionará a tag de parágrafo “
”, Depende da veracidade da variável“ showText ”.
Diretiva “v-show”
Da mesma forma, temos a diretiva “v-show” que pode executar a mesma funcionalidade descrita acima:
Você pode ver o texto.
A diferença sutil entre "v-if" e "v-show" é que "v-if" não renderiza o elemento ao carregar a página se a variável associada não for verdadeira e carrega quando a variável se torna verdadeira. Em contraste, "v-show" irá renderizar o elemento no tempo de carregamento da página da web, mas o oculta. Portanto, "v-if" é eficaz no tempo de carregamento da página e demorado quando a variável se torna verdadeira. Ele deve renderizar todo o elemento enquanto "v-show" é eficaz em relação à veracidade da variável, demorando no tempo de carregamento da página da web.
Bem! Vamos dar uma olhada em uma diretiva que leva o argumento.
Diretiva “v-bind”
Outra diretiva mais amplamente usada é “v-bind”, que é usada para interagir e atualizar os atributos HTML. Por exemplo, se quisermos vincular alguma variável ao atributo "href" do tag, podemos vincular o atributo “href” assim:
Diretiva “v-on”
Assim como a diretiva "v-bind", o Vue fornece uma diretiva "v-on" para vincular a variável para ouvir os eventos disparados no DOM. Por exemplo, para ouvir o evento Click e associar alguma variável a ele, a sintaxe seria assim:
Nas vírgulas invertidas, podemos fornecer a expressão, bem como as funções.
Conclusão
Aprendemos sobre as diretrizes no Vue e vemos como usá-las.js. Discutimos algumas das diretivas integradas mais usadas e básicas do Vue.js, que ajuda muito e economiza muito tempo no desenvolvimento.
