Découvrir Vue.js 2

Ajouter un nouveau composant

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans une instance, vous bénéficiez de liens vers les éléments. Vous disposez aussi de liens vers le DOM, ce qui vous permettra de travailler avec.
03:59

Transcription

Alors l'espace de jeu, on le codera après. On verra comment ça va fonctionner et ce que va faire notre jeu. Mais on va avoir besoin d'autres espaces. En l'occurence ici, on va ajouter un espace supplémentaire qu'on ne va pas appeler game mais que l'on va appeler score. Cet espace nous servira à venir afficher le score du joueur en cours. Vous pourrez avoir aussi un espace pour afficher le joueur en cours. Déjà on va se créer un espace de score. Score.vue. Vous voyez que pour créer un composant, ce n'est pas très compliqué, on vient simplement créer le fichier. Après vous pouvez vous baser sur ce qu'il y a là. Dans le concret, on va avoir besoin de quoi ? On va avoir besoin d'une balise qui va être une balise template, que l'on va ouvrir et fermer à cet endroit-là dans laquelle on devra, vous le savez maintenant, avoir une div. Donc on va faire une div class et on va faire score et comme ça au moins on aura préparé un petit peu le terrain. Voilà on aura ensuite le score à l'intérieur. Pour le moment, pas besoin de s'embêter. Ensuite, qu'est-ce qu'on va avoir ? Comme on peut le voir dans l'exemple on va avoir un script. Alors ça par contre vous pouvez le recopier, ce n'est pas vraiment un problème. Attention à ne pas recopier le mauvais. Ne faites pas comme moi concrètement, recopiez celui-ci qui provient de game parce que c'est un composant. Donc ici c'est vraiment un composant. On va exporter le composant sous forme d'identifiant avec un nom on va l'appeler score. Puis si on veut avoir quelque chose ici, on pourrait dire votre score, hop, et mettre : et 0 pour que cette partie-là au moins pour le moment vienne s'afficher. Dernière partie, on va préparer pour le moment en tout cas, les styles. Les styles s'appliqueront à notre composant et à notre template. On pourra travailler ça proprement. Miantenant qu'on a fait ça on a créé un premier composant ici. Voilà, on a créé le composant score. Il va falloir le rattacher ce composant score. Comment on va le rattacher ? Il est exporté. Etant donné qu'il est exporté, on peut donc l'importer. Donc on va utiliser import ici et on va dire import Score. Ok. From quoi ? From./components puisque pour le coup c'est le dossier des components et puis Score. Pensez bien à prendre le même nom que le nom du fichier c'est-à-dire Score avec un S majuscule c'est extrêmement important. Puis ensuite dans les composants, on va définir qu'on veut utiliser également Score. Maintenant, comment on va faire pour afficher le Score ? On va simplement demander dans notre template de App.vue l'affichage de Score qui est un composant qui est nommé Score, puisque c'est le nom qu'on lui a donné, c'est le nom qui est défini et qui sera utilisé pour faire l'injection à l'endroit où on en a besoin. Donc vous faites une utilisation avec un import, vous déclarez le composant comme composant étant disponible dans cette application et ensuite vous pouvez utiliser le même nom pour la balise qui viendra insérer à l'intérieur de la balise le comportement de ce composant Score. Quand vous aurez fait ça, vous allez simplement recharger la page, ça devrait déjà être fait de toute façon, et vous voyez qu'ici effectivement, on a le Score qui apparaît et du coup on vient de créer un deuxième composant. Pour le moment évidemment, rien n'est dynamique. Vous vous rendez bien compte qu'on est en train de créer des coquilles vides mais c'est important de voir comment ça fonctionne. Vous remarquez qu'on pourrait en créer d'autres également. Alors je vous ai parlé d'un espace pour le joueur, allez c'est parti. Vous allez le créer comme ça, ça va vous faire un petit exercice. Vous allez l'importer à cet endroit-là, le rendre disponible et bien sûr venir ensuite l'afficher à l'intérieur. On aura donc trois espaces au final. Un espace game qui sera notre espace de jeu dans lequel on va dynamiser pour avoir des informations et pour mettre la logique du jeu, un espace score qui affichera le score de l'utilisateur et un espace utilisateur qui nous permettra d'avoir le nom de l'utilisateur et pourquoi pas de stocker quelques informations sur notre utilisateur. Vous voyez que là on est en train de travailler sous forme de composant. Chacun à sa place, chacun avec sa propre logique.

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 !