Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Vue.js 2

Comprendre les objets et les boucles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les objets sont différents d'un tableau simple. Dans cette séquence, vous apprendrez les rudiments des objets et vous verrez comment boucler sur un objet.
04:24

Transcription

Alors maintenant qu'on a notre espace pour le log maintenant qu'on a une collection, ce serait intéressant de venir insérer des informations à l'intérieur et de pouvoir les utiliser. Comment on va faire ça, c'est très simple, vous avez la possibilité de venir insérer ce que vous voulez. Soit vous insérez une phrase directement, soit vous insérez un objet. Dans le cadre de l'utilisation d'un objet, si vous avez par exemple une propriété de message, imaginons que vous ayez un objet comme ça, avec une propriété qui soit message : Vous mettez ce que vous voulez comme message, il faudra forcément aller chercher cette propriété, de cette manière. C'est obligatoire parce que quand vous allez itérer, vous allez récupérer l'item, c'est l'item que vous allez récupérer. Vous serez obligés de faire comme ça. Bon maintenant je vous montre comment on va s'amuser à ajouter des informations. On va être obligé de venir travailler sur la collection this.collection.unshift nous permettra d'informer et d'ajouter de l'information au tout début. Donc on va avoir un log qui va être mis à jour, à chaque fois qu'on va faire une action. Voilà ce que j'ai prévu dans l'interface, qui va du coup améliorer un petit peu aussi le jeu. Quand on va cliquer proprement sur le rond, on a this.clic++ ça c'était déjà le cas, pas de souci. Quand on va activer le bonus on va activer un clic++ supplémentaire donc il y a le clic qui va partir plus le bonus donc on va avoir un +2. A chaque fois regardez, je vais rajouter des messages qui vont être des messages qui vont s'afficher dans l'interface. S'il a réussi, c'est bravo et je vais lui mettre entre parenthèses ici le nombre de clics. s'il a réussi un Perfect avec le bonus, je vais lui mettre Perfect, et je vais aussi lui dire que c'est +2. Sinon, s'il n'a pas réussi le Perfect et qu'il est allé cliquer avec Alt sur quelque chose, je vais lui dire que non, c'est pas bon, il y a eu un problème. On va lui mettre aussi un -1, parce qu'on a envie évidemment de lui enlever des points donc là c'est this.clic-- S'il a cliqué sur l'interface, pareil on va faire un -- pour décrémenter et du coup, non, ça ne marche pas, tu as cliqué sur l'interface, -1 Donc ça, ça vous permet d'avoir à chaque fois le suivi, ce qui va se passer. C'est donc suffisant pour avoir du log, avec une interface réactive, une interface qui va communiquer de l'information à l'utilisateur et qui, nous permet déjà de jouer avec. Alors continuez la formation, ne vous arrêtez pas là en jouant. Je sais que vous avez envie de vous amuser mais il y a encore tellement de choses à faire, continuez. Je vous montre un peu ce que ça donne une fois qu'on a implémenté ça parce que, pour le coup, on va avoir une interface fonctionnelle. On va aller sur le navigateur et puis on va recharger le navigateur. On voit que, pour le moment, ça ne marche pas. Je clique effectivement Bravo je suis à 1. Bon, on a des petits décalages d'interface que vous pourrez régler. Il faut aller le chercher, il est là voilà, Bravo, à 3, là je vais appuyer sur Alt, je vais gagner un +2, encore Alt un +2, encore Alt un +2, décidément il n'y a que des Alt voilà, et là je suis à +2 à chaque fois, je suis monté à 13. Maintenant si je clique sur l'interface non, je suis redescendu à 12, -1, je redescends à 11, à 10, à 9 et ainsi de suite. Là, vous commencez à avoir un jeu fonctionnel que vous allez pouvoir améliorer. Vous voyez que ce n'est pas compliqué de venir itérer une collection. Ça va être extrêmement intéressant pour nous parce que les collections on va pouvoir en avoir dans plein plein de cas différents. Ça va vous permettre de travailler sur soit des collections que vous mettez à jour au fur et à mesure, ce qui est extrêmement intéressant parce que pour le coup votre interface devient riche, soit juste une collection que vous allez déclarer puisque là aussi vous allez déclarer ce que vous voulez. C'est cette collection que vous allez itérer pour travailler avec. A vous de voir ce que vous voulez faire. En tout cas là vous avez déjà un exemple complet qui fonctionne. N'oubliez pas que c'est unshift qu'on va devoir utiliser pour ajouter de l'information, au tout début. C'est comme ça que ça marche. Si vous faites unpush, vous pouvez faire unpush sur un array, le problème de ça, c'est que ça va le mettre à la fin. Ce n'est pas ce qu'on veut, on veut que se soit le premier message qui soit vu tout en haut de l'arbre donc on utilisera unshift sur une collection sur un array. Ce qui est assez génial aussi, c'est que les collections seront réactives et il y a des modifications. Les modifications sont prises en compte sur les collections, pour peu qu'on les ait placées dans l'objet data, c'est ce qu'on fait depuis le début. Si vous faites ça, vos collections deviennent réactives et elles font fonctionner également ici à chaque fois. Elles vont faire fonctionner si vous la mettez dans le watch, vous pouvez faire des choses supplémentaires avec, déclencher des événements, travailler avec de la donnée sans aucun problème.

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 !