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

Enclencher les mises à jour

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lors de changements d'informations dans l'instance, la mise à jour se lance automatiquement. Profitez-en pour entreprendre des modifications supplémentaires.
04:05

Transcription

Avant d'aller plus loin, on va juste clôturer ce chapitre en parlant des cycles de vie. C'est important parce qu'on est en train de créer des composants mais j'aimerais que vous compreniez le cycle de vie d'un composant. Alors un composant c'est exactement la même chose qu'une instance de vue sauf qu'il y a un peu moins de choses mais ça bénéficie des mêmes méthodes. En l'occurence, il y a un cycle de vie et voilà le diagramme qui est fourni sur la documentation de vue.js pour le cycle de vie. Quand vous démarrez un composant ou une instance de vue, en fait vous avez des événements qui sont levés. Il y a un beforeCreate qui est ici à cet endroit-là, avant la création. Ensuite il y a un created qui vous dit que le composant a été créé, il a initié différents évènements, on parlera des évènements plus tard et il a surtout vérifié les données que vous lui avez soumises. Ça c'est pareil, on va le voir. Ensuite, qu'est-ce qui se passe ? Il y a le fait de monter cet élément. En fait, le montage c'est l'implémentation dans l'élément html. Du coup ça va être le parent tout en haut. Mais il y a des évènements à cet endroit-là aussi. BeforeMount et mounted et ensuite, il y a toute cette phase de mises à jour. Donc il y aura une mise à jour du dom virtuel puisque ça se câble sur un dom virtuel qui sera mis à jour en fonction de l'évolution de la donnée dans notre vue et on verra qu'on peut faire beaucoup de choses avec ça. Ensuite, si jamais vous démontez puisque vous avez des possibilités de démonter, il y a un beforeDestroy et bien sûr un destroyed qui s'affichent à la fin et qui sont donc des événements sur lesquels on va pouvoir venir se câbler. Alors quand je parle de câbler sur les évènements en fait c'est simplement parce que tout ça, on appelle ça des hooks et vous pouvez directement les déclarer à l'intérieur de votre construction pour venir travailler soit sur des données que vous allez mettre à jour, soit pour savoir que c'est bien en train de se réaliser et qu'on a donc bien des points de montage sur lesquels on va pouvoir se câbler. Alors pour le test et pour voir exactement ce que ça donne, on pourrait simplement demander par exemple sur notre composant player que vous avez dû, je pense, créer. Si ce n'est pas fait, vous pouvez le créer. Vous pourrez ici venir mettre un événement comme ça, created. Donc il suffit simplement de venir déclarer l'information ce sera suffisant pour que ce soit utilisé et déclarer ensuite à l'intérieur une fonction anonyme et cette fonction anonyme on peut lui faire jouer via un console.log quelque chose. Par exemple, on peut lui dire component created. Et ça, ça va nous permettre de voir qu'effectivement cette fonction-là est bien jouée et que tous les points de montage qui sont disponibles, donc tous les événements, peuvent être déclarés en tant que hook et on peut faire quelque chose. Donc on va pouvoir à l'intérieur de ces points de montage venir travailler sur des logiques métier et si je vous le montre maintenant, c'est parce qu'll y a une vraie raison. On va en avoir besoin, on va initier de la donnée à l'intérieur, à cet endroit-là et quand on aura terminé d'utiliser cette donnée on verra qu'on peut la détruire aussi. Pour voir que ça fonctionne bien, vous allez retourner ici dans votre composant, du moins dans votre installation de vue.js qui est en train de tourner dans le navigateur. Vous rechargez la page et vous verrez qu'effectivement ici vient s'afficher component created qui est exactement celui qu'on a défini là. Donc là, on l'a utilisé avec l'événement created, mais bien sûr vous allez pouvoir l'utiliser avec tous les autres événements c'est-à-dire beforeCreate, beforeMount, mounted eccetera eccetera. Tous ces événements-là sont des évènements sur lesquels on peut venir se câbler. Gardez bien aussi de côté ce petit diagramme qui vous permet de bien comprendre ce qui se passe parce qu'au fur et à mesure de nos avancées dans cette formation, vous allez comprendre qu'effectivement tous ces événements-là sont intimement liés et représentent un vrai diagramme de mise en place des informations au travers de vue.js. Vous voyez que c'est quand même bien fait et on a une vraie imbrication et une vraie gestion événementielle jusqu'à arriver à l'affichage. Pourtant ça va très vite. On voit qu'effectivement aucun scintillement, rien. Ça va très très vite à être monté. Vous verrez qu'effectivement, pour développer des applications c'est quand même très très sympa.

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 !