Découvrir Vue.js 2

Utiliser des boucles sur une liste

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
En manipulant une liste, vous devrez obligatoirement boucler sur les éléments. Ainsi, vous obtiendrez une décoration unique et applicable à tous les utilisateurs.
06:33

Transcription

Avec vue.js, vous avez également la possibilité de faire des boucles. Alors qu'est-ce que ça veut dire des boucles, on va pouvoir itérer c'est-à-dire parcourir un tableau, une liste, des objets, ce que l'on veut, avec une directive très simple qui s'appelle v-for. Alors celle-ci va nous permettre d'itérer depuis une collection ou depuis une liste d'informations, et à chaque fois d'avoir les différentes informations qui s'affichent. On va l'utiliser dans un cas concret, parce qu'on va avoir besoin de l'utiliser pour avoir du log, c'est-à-dire avoir un espace. On va se créer une div avec une class qui va s'appeler log dans laquelle on va venir afficher les différents messages, en fait de ce qui se passe dans l'application. Donc pour éviter de l'avoir dans la console, pour éviter que l'utilisateur puisse voir ce qui se passe, on va ajouter des messages à chaque fois à notre collection et puis cette collection comme elle va se mettre à jour, on va pouvoir itérer dessus et du coup, voir ce qu'il se passe. Alors il faut savoir qu'ici, on va avoir besoin d'abord d'une collection cette collection, il va falloir la créer, et pour le premier exemple, pour que vous compreniez ce qui se passe, on va simplement ici se taper une collection, et puis on va mettre ici message 1 et puis ensuite message 2, et puis ensuite, message 3. Donc là vous avez simplement créé une collection, cette collection, elle va être disponible dans votre interface, alors faites très attention parce qu'ici on vous dit que vous avez un petit problème pourquoi, parce que vous ne pouvez plus en fait ajouter si vous n'avez pas un objet qui va entourer. Donc il va vous falloir un objet entourant donc on va se faire simplement une div class ici, et on va faire un container, alors faites attention parce que le container, du coup avec bootstrap, il va vous ajouter du style. Et ça, c'est pas forcemment génial mais ça peut fonctionner quand même donc là le build est successful, vous voyez que là, on a un petit problème avec le style donc on va être un petit peu embêté alors on va pas faire un container on va plutôt faire ici un content, content ce sera plus simple, alors ça va quand même vous casser le style tout simplement, parce que c'est Game en fait qui avait une taille et il va falloir remettre cette taille parce qu'on était en fait sur une application, on avait ici un width à 100 et du coup comme c'est scopé ça va nous poser problème. Donc on va faire simplemement content comme ça. On va répercuter le style que l'on avait, appliqué à l'application c'est-à-dire une hauteur de 500 pixels ce qui vous permettra de conserver le comportement de l'interface et ça, ça sera plutôt intéressant. Voilà, là, on récupère notre jeu. Alors du coup notre petit emplacement qui va contenir le log ici, il va aussi falloir aussi lui mettre du style et il va falloir ensuite venir réitérer. Alors on va simplement se créer du style ici avec .log, on va lui dire que voilà la width c'est 100%, ça c'est bien, par contre la hauteur ça ne va pas être 100%, la hauteur on va la fixer et on va la fixer à 50 pixels, par exemple, pour avoir juste un emplacement. On va ici lui mettre aussi un background, et ce background, on va faire une couleur qui soit une couleur qui soit un petit peu sombre. On va plutôt mettre la couleur 666, qui sera pas trop mal, voilà. On va lui dire aussi que c'est un display block, comme ça. On va voir quelque chose qui va être visible dans l'interface, voilà, vous l'avez là. Alors faites attention parce que comme vous pouvez le voir ça ne va pas être super au niveau de la taille. On va mettre plutôt l'espace de jeu à 400 à peu près, pour que ça prenne un petit peu moins de place, même à 400 vous voyez, ça nous pose quand même problème, alors c'est l'application qu'on a là qu'on va augmenter dans ce cas là, on va la monter à 700 et comme ça, on aura quelque chose qui est un petit peu mieux, le problème qu'on a ici, c'est que, du coup, ce composant ici, il va venir en dessous. On ne veut pas, alors on ne veut pas pourquoi, parce que ça prend 100%. Game prenant forcément 100%, vous voyez que là on va être embêté. Alors faites attention aussi à votre interface, Game c'est pas grave on va dire que game prend 90% de l'interface et comme ça vous serez un petit peu plus tranquille, en hauteur. Voilà, 90% comme ça, là vous aurez le log, mais l'idée c'est vraiment de réussir à avoir un log qui est un petit peu visible quand même, pour voir ce qui se passe dedans parce qu'on va itérer. On va avoir envie d'avoir de l'information, alors 50 c'est peut-être un peu trop grand encore, on va même se mettre à 30, voilà pour avoir juste ça, et comme ça on va pouvoir réaugmenter un petit peu la taille. Vous voyez que ça va demander des modifications, un petit peu d'interface, mais bon, c'est pas très grave. Alors notre collection qu'on a là maintenant on va l'itérer. Comment on va l'itérer ? On va choisir un élément, par exemple un p, on va avoir comme ça, et puis ce p ici on va utiliser v-for et on va regarder la syntaxe qui est proposée. Vous allez voir que cette syntaxe elle est très simple c'est item in items. Nous, ça va être v-for item in collection parce qu'on a appelé notre variable qui stocke les informations collections donc item in collection. Là vous allez pouvoir venir simplement afficher chaque item. Ça va faire item comme ça, ça va nous prendre message 1, message 2, message 3, chacun dans un paragraphe, à chaque fois, ça va itérer votre collection. Là vous ne voyez que message 1 apparaitre, message 1 message 2 message 3 qui se trouvent en dessous, ça veut dire qu'il va falloir que quand même les mettre dans l'autre sens si on veut avoir le dernier message tout en haut. Et ça on va le voir ensuite, vous voyez qu'ici, simplement on itère et c'est largement suffisant. Si vous voulez que votre log soit pour le coup à un emplacement dans lequel on ait les messages et qu'on ne voit pas ce qui en sort, on peut utiliser également l'overflow. Je vous conseille de tester à chaque fois vos déclarations ici pour voir ce que ça donne, vous avez la possibilité sur votre div ici d'appliquer un overflow et l'overflow, ça peut être un overflow hidden ce qui fait qu'on ne voit pas les autres messages en dessous. Ça sera plutôt une bonne chose. De même je vous conseille d'avoir un padding, par exemple à 10 pixels, alors ça sera assez important, donc on va mettre plutôt un pading à 6 pixels, et comme ça vous aurez quelque chose de sympa, sur lequel on va pouvoir avoir des messages au fur et à mesure. Alors ça veut aussi dire que cette collection il va falloir qu'on la travaille pour rajouter de messages à chaque fois pour avoir le dernier message qui vient s'afficher. Et ça on va le voir avec des objets, on va pouvoir insérer les objets et puis boucler dessus et puis récupérer les informations, ça va pas être un souci.

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 !