Découvrir Vue.js 2

Utiliser la syntaxe avancée pour les boucles

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour aller plus loin avec les boucles et Vue.js, étudiez une méthode qui accélère le rendu. Cela vous permettra également de gagner du temps.
03:56

Transcription

Une méthode extrêmement intéressante, aussi, quand vous avez besoin de faire du filtre. Parce que concrètement c'est ce qu'on est en train de faire. En fait, on est train de demander ici, un filtre par type, sur une collection. Vous pouvez tout à fait, venir utiliser une méthode de filtrage, très simple, qui vous permettra de venir récupérer une collection que vous aurez, en fait, au préalable, filtrée, nettoyée, en fonction d'une condition. Alors, comme vous le voyez ici dans l'exemple, ici, on va utiliser computed. Et computed, ça va vous permettre dans plein de cas différents, de venir faire des constructions un peu particulières à partir de quelque chose, et de le renvoyer. Et ça, c'est bien, parce qu'en plus de ça, c'est réactif donc c'est génial, on va pouvoir travailler avec ça, ça va réagir à chaque fois que vous allez le modifier. Donc, nous, on va récupérer le computed qu'on a là et puis on va l'adapter un petit peu à notre code parce que c'est exactement ce qu'on aimerait. En fait, on sait qu'on va avoir ici, voilà, une variable qui va être computed, alors je ne l'ai pas récupérée, alors je vais la récupérer, voilà. Et, on sait aussi que, en fait, on va vouloir ici, les userLogs. Donc, on va faire userLogs, et les userlogs qu'est-ce que ça va être? ça va être simplement this.collection, ici filter, fonction item, et, en fait on va retourner item.type===user. Donc, si c'est ===user, on va le retourner, sinon non. ça , ça va nous filtrer la collection. Ca va être super. Et ça , on va pouvoir l'utiliser dans le template sans avoir à définir de v-if. Beaucoup plus propre, beaucoup plus simple. Et comme ça, vous allez avoir des collections différentes donc vous avez une collection que vous êtes en train de manager, de travailler et puis vous avez une collection filtrée qui va être basée sur quelque chose de particulier que vous allez réexploiter dans le template et tout ça de façon un peu automatique. Alors, on va revenir sur notre interface, on va recharger, et effectivement, on voit qu'ici, voilà, vous n'allez utiliser ici, qu'une espèce d'abstraction de votre collection de base qui va être filtrée, qui va vous permettre d'avoir les informations. Et qui est mise à jour en live. Alors n'hésitez surtout jamais à utiliser les computed parce que c'est vraiment extrêmement intéressant. Ca marche avec toutes les datas que vous avez stockées. Si vous voulez trier, filtrer, retourner, avoir la même chose que cette partie-là, sans avoir à la modifier, c'est ça qui est génial, c'est qu'à aucun moment vous ne modifiez la collection réelle, par exemple, ici, dans notre cas, elle reste exactement comme elle est, stockée dans les données. Par contre le computed ici, vous permet d'avoir une version, une vue en fait, c'est simplement une vue de vos datas mais modifiée, à la volée et en live. Et donc ça, c'est une méthode extrêmement interessante. Bien sûr qui fonctionne avec, comme je vous l'ai dit, avec absolument tout. On pourrait avoir une version modifiée, ou une version triée, filtrée directement dans les computeds. Ca ,ça peut nous permettre par exemple, aussi de venir construire des messages. On pourrait avoir, effectivement, ici, dans le Player, un message particulier. Vous voyez ce message qu'on a ici, ça peut être un message qui est computed et qui du coup va utiliser à chaque fois le player et qui, pourquoi pas, on l'utilisera que si, effectivement, il y a une condition qui se déclenche. Donc là, on peut imaginer, des fonctionalités particulières avec cette partie là, qui seraient mises à jour en fonction de quelque chose. Voilà, pour cette partie-là, pour la partie génération de collection, gestion de collection, travail sur, pourquoi pas des items avec des filtres particuliers. Voyez qu'il y a quand même, de ce coté là aussi, dans Vue.js, beaucoup d'informations à traiter et on peut faire énormément de choses. Bon là, on commence à avoir une application complète. On n'a pas énormément de lignes, on a 130 lignes sur Game.vue qui est notre plus grosse vue, ce n'est pas non plus énorme pour un logiciel, sachant qu'on pourrait extraire une bonne partie, c'est-à-dire que toute cette partie là, on pourrait la sortir dans un composant et puis la partie qu'on a ici, exactement, serait un composant aussi donc, en fait, le log n'a pas grand chose à faire là. Vous ne savez pas encore communiquer entre composants et c'est ce qui va être bloquant pour le moment et on verra comment on communique entre composants du coup.

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
Votre/vos formateur(s) :
Date de parution :14 févr. 2017
Durée :2h25 (44 vidéos)

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 !