Phenquestions
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 framework JavaScript enrichi de fonctionnalités qui fournit de nombreuses fonctions et directives intégrées pour accélérer le processus de développement. Mais, il doit y avoir des scénarios où vous avez besoin de fonctionnalités qui ne sont pas disponibles par le framework, vous devez donc créer votre propre.
Dans cet article, nous allons apprendre et examiner les directives intégrées fournies par Vue.js, et nous apprendrons également à créer et à utiliser notre propre directive Vue personnalisée.
Directif
Les directives sont des attributs que vous pouvez lier aux éléments DOM, préfixés par la clause « v- » qui permet de 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 du 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 de manière réactive. Comprenons-le avec un exemple :
Directive « v-si »
Vous pouvez voir 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éracité de la variable “showText”.
Directive « v-show »
De même, nous avons la directive « v-show » qui peut effectuer la même fonctionnalité décrite ci-dessus :
Vous pouvez voir le texte.
La différence subtile entre "v-if" et "v-show" est que "v-if" ne rend pas l'élément lors du chargement de 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 moment du chargement de la page Web mais le masquera. Ainsi, « v-if » est efficace au moment du chargement de la page et prend du temps lorsque la variable devient vraie. Il doit rendre l'élément entier tandis que "v-show" est efficace sur la véracité de la variable qui prend du temps au moment du chargement de la page Web.
Bien! Regardons une directive qui prend l'argument.
Directive « v-bind »
Une autre directive la plus utilisée est « v-bind », qui est utilisée pour interagir et mettre à jour les attributs HTML. Par exemple, si nous voulons lier une variable à l'attribut "href" du tag, 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 déclenchés dans le DOM. Par exemple, pour écouter l'événement Click et lui lier une variable, la syntaxe ressemblerait à ceci :
Dans les guillemets, nous pouvons fournir l'expression ainsi que les fonctions.
Conclusion
Nous avons appris les directives dans Vue et voyons comment utiliser les directives dans Vue.js. Nous avons discuté de certaines des directives intégrées les plus utilisées et les plus basiques de Vue.js, ce qui aide beaucoup et fait gagner énormément de temps dans le développement.
