Dans cet article, vous découvrirez la puissance de Vue.js Bind Directives et ses cas d'utilisation dans une application de crypto-monnaie. Il est parfaitement adapté à tous les développeurs VUE JS et JavaScript à tous les niveaux.
Pour bien comprendre ce tutoriel, vous devez avoir au minimum: une connaissance très basique de Vue.js. Une bonne compréhension du CSS et des sélecteurs descendant dans CSS. Si vous en avez, alors à la fin de cet article, vous pourrez écrire des conditions simples, interactives et fonctionnelles en utilisant la directive Vue.js Bind; Et surtout, comment utiliser la directive Vue.js Bin pour la réactivité sur l'application.
Dans vue.js, les directives sont des raccourcis utilisés pour ajouter des fonctionnalités aux éléments DOM. Ils ciblent, changent et font que les éléments font spécifiquement plus dans le DOM. Bien que plusieurs directives améliorent les fonctionnalités générales d'une application Web VUE, ce tutoriel se concentrera sur un type de directif appelé la directive V-Bind.
Lors de la création d'applications Web, certains attributs HTML (comme SRC, HREF, classe, etc.) peuvent se charger par défaut, ou ils pourraient être à la suite des conditions définies par le développeur.
Les petites interactions utilisateur, comme cliquer, peuvent modifier dynamiquement certaines parties du HTML pour afficher des contenus différents, et ceux-ci sont cruciaux pour améliorer l'expérience utilisateur (UX) dans les applications Web et mobiles, que ce soit dans une application de réseautage social, une application Web3, une application alimentée par AI et bien d'autres.
Pour plus de contexte sur ces petites interactions, considérons deux instances en utilisant un homme que nous appellerons "Dan":
Le premier est que Dan entre dans une application sociale et recherche un profil. Si le profil est en ligne, il voit un point vert à côté du nom pour montrer que le profil est «actif»; Sinon, il voit un rouge (inactif).
Le second est Dan en train de commander une chaussure en ligne. Sur la page description du produit, il trouve deux tailles disponibles pour les chaussures qui les intéressent. Si les tailles 14 et 18 sont disponibles, et il clique sur un, il y aurait une indication sur le site Web que la taille a été sélectionnée, pour cela, en modifiant la couleur du bouton en vert (ou une autre couleur notable).
Des actions comme celles-ci pendant le développement nécessiteraient une grande partie de code composée principalement de plusieurs styles CSS et de JavaScript de vanille traditionnel ou d'autres conditions de cadre. Cela semble déjà être un tronçon, surtout compte tenu de la simplicité de la fonctionnalité.
Heureusement, lors de la création de cette réactivité, les développeurs peuvent utiliser Vue.js pour rendre le code plus facile à lire, à écrire et à comprendre avec la directive en V.
«Lier» en termes généraux, signifie connecter ou joindre deux choses ensemble. Il s'agit d'une base solide pour comprendre ce que fait la directive en V-Bind. Il s'agit d'un type de directive Vue.js qui est attaché à notre HTML via un jeton spécial dans le but d'ajouter du style et de la fonctionnalité aux éléments DOM.
Son objectif n'est pas de changer le fonctionnement du code mais de simplifier l'expression et de le rendre plus lisible et plus facile ...
[Courte citation de 8% de l'article original]