Découvrir Vue.js 2

Réduire le code avec les directives

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les directives réduisent aussi l'impact du code sur votre projet. Vous pourrez également gérer des logiques d'affichage.
06:33

Transcription

L'idée maintenant c'est de créer une directive qui va nous permettre de cacher un élément en fonction de logique métier. Comment on va faire ça ? D'abord on va la préparer. Notre nouvelle directive va s'appeler hide, et elle va nous permettre de cacher un élément si on a de l'information, si on a un joueur, par exemple, on va cacher le formulaire, et si on a pas de joueur, on va afficher le formulaire ; ben voilà. On va traiter l'élément en fonction d'une logique. En fait, on va faire la même chose que ce qu'on a fait au niveau CSS, mais avec une directive. Vous allez ajouter un troisième argument, c'est v node. V node, ça va être très intéressant, parce que ça va nous permettre d'avoir le contexte d'exécution de notre directive et notamment de récupérer le parent, pour pouvoir voir si on a un player ou pas. Alors, comment on va faire fonctionner ça ? D'abord, on va se faire un petit console.log de l'élément, et puis, on va pas oublier d'attacher notre directive, ici, sur le formulaire, avec v-hide, et sur le span, avec v-hide aussi. Donc, logiquement, on devrait avoir deux instances qui démarrent et forcément ici deux éléments. Donc ces deux éléments-là, ça va être très intéressant pour nous, pourquoi, parce qu'on va pouvoir travailler sur l'élément et on va pouvoir vérifier que l'élément répond bien à certaines attentes. On va également regarder ce qu'on a du côté de la node, v-node. Parce que c'est important que vous ayez regardé un petit peu ce qui se passe à l'intérieur. Alors, les v-node qu'est-ce que c'est ? On voit qu'effectivement ici on a tout un tas d'information, notamment on a le tag, actuellement, on sait exactement sur quelle tag c'est implémenté, dans un cas c'est sur un span, et dans un autre cas c'est sur un form. Ça, ça nous donne une information intéressante. Mieux que ça, vous avez ici le contexte d'exécution et dans le contexte d'exécution, étant donné que c'est le parent, vous allez avoir des informations, et notamment le player class, le welcome message, il y a quelques petites infos très intéressantes que l'on va ppuvoir récupérer. Est-ce qu'on peut récupérer le player ? Il va falloir forcément aller chercher un petit peu, mais en toute logique, on aurait pas de problème à récupérer le player. Le player, vous allez l'avoir sur le contexte. Alors là, actuellement, il y a pas de joueur, donc c'est pour ça qu'on le voit pas. Et si on le ré-implémente, il y aura un joueur sans aucun problème, regardez. Ici on va faire this.player, on va remettre Julien, et si je fais ça, dans mon contexte d'exécution, on va recharger, on verra qu'effectivement, sur le contexte, on se retrouve bien avec le joueur. Donc on a la capacité de savoir si on a un joueur ou pas. Alors on va le laisser, le joueur, pour le moment, et puis on va travailler là-dessus. Ce qu'il faudrait faire c'est d'abord savoir si c'est un formulaire. isForm. Je vous conseille d'utiliser le mot-clé let, pour avoir un scoping des variables directement dans la fonction et puis pas à l'extérieur, comme ça, ça vous permettra de vraiment avoir quelque chose qui fonctionne dans sa fonction, et pas à l'extérieur. isForm ça va être quoi ? Ça va être vnode point tag, égal égal égal, à quoi ? Eh bien, à form. Donc si c'est un formulaire, on appliquera pas la même logique que si c'est un span. Ça, vous allez faire un console.log dessus pour être certains que tout se passe bien. Donc, on va regarder à l'intérieur. Alors attention, faites pas de bêtise comme moi, il y a pas de point-virgule. C'est vrai que c'est une mauvaise habitude quand on fait du Javascript. Là on voit que dans un cas c'est true, dans un cas c'est false. Donc on a déjà un fonctionnement qui est OK. Maintenant on va donc faire un if. If, forcément, is form. On va travailler sur l'élément. Element, donc on va lui dire, element qu'on a là, el point style, point display est égal, et là on va utiliser un petit ternaire. Alors, il faut récupérer le player. Pour récupérer le player, on va le mettre là aussi. let player est égal vnode bien sûr, ce sera quand-même plus intéressant de faire comme ça, point context, on sait que c'est dans le contexte qu'on va récupérer le player, point player. Et puis on va lui dire, est-ce qu'il y a un joueur ? Alors, si il y a un joueur, étant donné que t'es un formulaire, tu vas te cacher. Sinon, si il y a pas de joueur, tu vas être display block, tu vas t'afficher. Alors, attention, pour le display c'est none. C'est pas hide, c'est none. Dans le cas contraire, on est sur un span. Ça veut dire que le span, c'est la même logique, mais à l'invers. Si il y a un joueur, c'est display block, si il y a pas de joueur, c'est display none. Et maintenant qu'on aura fait ça, on peut carrément supprimer les styles en dessous, qui ne servent plus à rien. Et, mieux que ça, on peut même aller plus loin, c'est qu'on peut carrément supprimer la player class, qui ne sert plus à rien. La player class était là uniquement justement pour appliquer un style différent en fonction de. Maintenant on se retrouve avec un code qui est un tout petit peu plus léger, et qui fonctionnera de la même manière. Alors faites attention, encore une fois, aux points-virgules ; il en reste un. Un petit point-virgule ici, OK. Vous ferez attention également, de temps en temps il vous dira que vous avez des espaces en trop. Alors, c'est les éditeurs qui font ça, malheureusement. Regardez, c'est les espaces qu'on a là. Heureusement que je vous le montre, parce que ça c'est une erreur assez fréquente dans les éditeurs, mais le compilateur déteste les espaces en trop, et il vous criera dessus. Alors là, en l'occurrence, on a un joueur, effectivement. « Bonjour, Julien ! » s'affiche. Maintenant, si j'ai pas de joueur. On va simplement supprimer « Bonjour, Julien ! » qui sera le Julien qu'on a à l'intérieur de player. Il y a plus de player, donc c'est le formulaire qui s'affiche. Vous voyez comme, en quelques lignes, on réussit à mettre en place une logique métier. Je récapitule ce qu'on a fait. On a créé ici une directive personnalisée, hide. Cette directive, on l'a appliquée sur le span et sur le form. On s'est occupé d'abord de vérifier si c'était bien sur un form que c'était, ou si c'était sur un span. Avec juste une petite variable qui va être un true ou un false. Ensuite, on récupère le player sur le contexte, sur la vnode, voyez que faut suivre, quand-même, et puis, après, on va utiliser donc simplement ici une petite condition et on va appliquer un style en fonction de si c'est sur un formulaire, on aura une logique différente que sur un span, qui nous permet d'identifier en fait nos deux espaces. Là, avec cette méthode-là, vous allez pouvoir travailler des logiques métier qui vont être des logiques métier un peu compliquées, sans avoir à surcharger avec des styles CSS dans tous les sens. Je vous conseille vraiment de travailler le plus souvent sur les styles comme ça, à l'intérieur des éléments. Déjà, d'une, c'est plus rapide, il y a pas de lecture à faire, puisque ça s'applique automatiquement, et puis en plus vous pouvez appliquer des logiques qui sont quand-même un petit peu plus lisibles que du style CSS. Voilà pour les directives personnalisées. Vous voyez qu'on peut faire beaucoup de choses avec.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !