Qu'est-ce qu'une directive Vue, et comment l'utiliser?
Un framework vise à fournir de telles fonctionnalités qui rendent le processus de développement plus facile et plus rapide pour les développeurs. Vue.JS est un tel framework JavaScript enrichi les fonctionnalités qui fournit de nombreuses fonctions et directives intégrées pour faire rapidement le processus de développement. Mais, il doit venir des scénarios lorsque vous avez besoin de fonctionnalités qui ne sont pas disponibles par le cadre, vous devez donc construire le vôtre.
Dans cet article, nous apprendrons et jeterons un coup d'œil aux directives intégrées fournies par la Vue.Framework JS, et nous apprendrons également à créer et à utiliser notre propre directive Vue sur mesure.
Directif
Les directives sont des attributs que vous pouvez lier avec les éléments DOM, préfixés par la clause «V-» qui aide à connaître la bibliothèque qu'il s'agit d'un type spécial de syntaxe utilisé pour effectuer certaines tâches. Les directives sont généralement utilisées pour la manipulation directe de DOM. Certaines des directives les plus utilisées et les plus célèbres sont «v-if», «v-for» et «v-show».
Les directives sont utilisées pour appliquer des effets sur les éléments DOM mais réactivement. Comprenons-le avec un exemple:
Directive «v-if»
Vous pouvez afficher le texte.
Dans la balise ci-dessus, le «v-if» est une directive qui supprimera ou ajoutera la balise de paragraphe «
», Dépend de la vérité de la variable« ShowText ».
Directive "V-show"
De même, nous avons la directive «V-show» qui peut effectuer les mêmes fonctionnalités décrites ci-dessus:
Vous pouvez afficher le texte.
La différence subtile entre «v-if» et «v-show» est que «v-if» ne rend pas l'élément tout en chargeant la page si la variable liée n'est pas vraie et qu'elle se charge lorsque la variable devient vraie. En revanche, «V-show» rendra l'élément au temps de chargement de la page Web mais le cache. Ainsi, «v-if» est le temps efficace au temps de chargement de la page et de temps lorsque la variable devient vraie. Il doit rendre l'ensemble de l'élément tandis que «V-show» est le temps efficace sur la vérité du temps variable à l'heure de chargement de la page Web.
Bien! Jetons un coup d'œil à une directive qui prend l'argument.
Directive «V-Bind»
Une autre directive la plus utilisée est «Vind», qui est utilisée pour interagir et mettre à jour les attributs HTML. Par exemple, si nous voulons lier une variable à l'attribut «HREF» de la balise, nous pouvons lier l'attribut «HREF» comme ceci:
Directive «V-on»
Tout comme la directive «V-Bind», Vue fournit une directive «V-on» pour lier la variable pour écouter les événements tirés dans le DOM. Par exemple, pour écouter l'événement de clic et la lier une variable, la syntaxe irait comme ceci:
Dans les virgules inversées, nous pouvons fournir l'expression ainsi que les fonctions.
Conclusion
Nous avons appris les directives de Vue et voyons comment utiliser les directives de Vue.js. Nous avons discuté de certaines des directives intégrées les plus utilisées et les plus de base de Vue.JS, qui aide beaucoup et économise énormément de temps dans le développement.