Découvrir Vue.js 2

Accéder aux données dans la vue

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez quelles sont les données exposées par la vue. Ces données incluent des propriétés, des balises HTML et des données dont la manipulation est simple.
06:14

Transcription

Pour le moment, on a rien vraiment dynamique. Actuellement, tout ce qu'on a dans les templates ce sont des choses qui sont des choses statiques. On a actuellement un texte « Bonjour Julien » ici, et puis pour le score, on a le score ici de façon statique. Il serait très intéressant de dynamiser un petit peu les choses, et d'attacher de l'information, et surtout de la récupérer à l'intérieur du template. Alors, deux possibilités. Soit vous allez vous baser sur les événements pour construire, et là, actuellement, on a un hook d'événement, created, sur lequel on va pouvoir se câbler et envoyer de l'information. On va devoir référencer sur notre composant des propriétés que l'on va venir| récupérer dans le template, donc on va exploiter ces données, mais d'abord il va bien falloir les rattacher. Pour rattacher une donnée, on va utiliser this, qui est l'objet du composant. Et puis, avec point, comme c'est un objet, on va venir rattacher des propriétés. Ici, on va attacher un welcome message. Je vous conseille toujours de coder en anglais, parce que vous êtes en anglais, tout est en anglais, donc c'est mieux de référencer ces variables en anglais. Bien sûr, après, le contenu texte de votre site, bon, ça vous regarde. On va vérifier qu'un joueur est déjà connecté. Donc on va faire this player. Si il y en a un, avec un petit ternaire ici, on va venir référencer la phrase « Bonjour », comme ça, on va mettre un petit plus pour concaténer le nom du joueur this.player, et puis, à la fin, bien sûr, on va mettre le point d'exclamation. Alors, on va faire attention aussi, respecter les petits espaces qu'on a là, qui seront intéressants pour nous. Et puis, sinon, on va simplement ajouter « Pas de joueur ». Comme ça on saura si un joueur est disponible ou pas. Alors, maintenant qu'on a fait ça, on a rattaché à la création de notre composant de la donnée, il va falloir afficher cette donnée dans le template. Pour afficher, on va récupérer simplement le nom des variables que l'on a attaché à l'objet. C'est le nom uniquement qui nous intéresse. This, je vous le rappelle, c'est simplement votre objet, donc on rattache grâce à this, parce que on vient travailler sur l'objet, this étant le reflet de notre composant actuel. Mais on utilise pas this dans le template. On utilise uniquement le nom de la variable. Pour afficher l'information, on va simplement utiliser dans template des doubles accolades, comme ça. Donc c'est un petit peu la syntaxe moustache, pour ceux qui connaissent, c'est exactement la même chose. Et puis on va ici, à cet endroit-là, mettre le nom de la variable. En l'occurrence, celle qui est exposée par le composant, c'est à dire welcome message. En faisant ça, vous allez avoir, si vous avez un joueur, bien sûr, vous allez avoir le nom du joueur. Si vous n'avez pas de joueur, vous allez avoir « Pas de joueur ». On pourrait essayer simplement de tester. On va faire this player est égal Julien, comme ça. On va enregistrer, et vous verrez qu'effectivement, si il y a un joueur, ça fonctionne. Bon, ça, vous imaginez bien qu'on va le dynamiser un petit peu plus tard. Pour le moment, on va laisser ça en l'état. On se prépare. Maintenant pour le score. Alors, ici pour le score, j'aimerais pouvoir à cet endroit-là afficher zéro de façon dynamique. Donc préparer une donnée qui, potentiellement, plus tard, va être mise à jour par le jeu. Ici, en l'occurrence, je vais rattacher de la donnée. Alors, c'est la deuxième manière que l'on a de venir travailler sur de l'information sur un composant, c'est de travailler la donnée en la rattachant directement dans le composant, non pas sur un événement, mais vraiment dans le composant. Pour ça, vous allez devoir utiliser data. Alors, comme ici on est en train d'exploiter la syntaxe ES6, c'est à dire vraiment la syntaxe sans avoir à créer des composants, on va devoir automatiser un petit peu, et surtout fournir une fonction anonyme, c'est obligatoire, pour refléter les données. Cette fonction anonyme data doit retourner un objet, donc faire un return sur cette fonction. Et ici on doit avoir les informations que l'on va pouvoir exploiter dans le template. En l'occurrence, je vais mettre une propriété score, qui va être à zéro, de base et puis si vous voulez faire ça bien, vous pouvez tout à fait et sans aucun problème voilà, ouvrir votre objet, pour avoir quelque chose d'un peu plus clair. Vous remarquerez que, ici, on, avec ma script 6, es6, on utilise pas à la fin des lignes le point virgule, pourquoi, parce que c'est directement ajouté par le compilateur à la fin, on a pas besoin de s'embêter avec ça. Ici j'ai mon score. Ça va marcher de la même manière. Alors, que je référence des propriétés par this, ou que je les références directement dans data en les passant dans un objet, ça ne change rien, la récupération de l'information, elle se fait de la même manière, c'est à dire avec des doubles accolades, et je vais venir exposer dans mon template une variable qui est disponible dans mon composant, et on va avoir ici une compilation qui est OK, et on voit bien ici que le score est à zéro pour le moment. Ce qu'on pourrait faire, si on veut s'amuser un petit peu, et puis pour voir que tout fonctionne bien, on pourrait lui dire qu'au moment de la création, donc on peut lui rattacher ici create. On va lui dire à cet endroit-là, donc toujours pareil, c'est de la fonction anonyme que l'on va utiliser, c'est pareil, que le score, donc this point score, plus plus. Donc je vais lui demander d'augmenter le score à la création. Ce qui se passe, vous le voyez bien ici, c'est que, quand j'ai créé mon composant, le score était à zéro, et puis, au moment où le composant il est monté il est créé, il est disponible, le score passe à un. Donc vous avez possibilité de façon dynamique de venir travailler sur les informations. Ça, c'est uniquement pour en être sûrs qu'il n'y a pas de problème, et qu'on a bien ici un score à zéro qui passe à un, et si je le mets à deux, on verra bien qu'effectivement, au moment où il est monté, au moment où il est rattaché il passe à trois. Donc ça fonctionne bien. Le score de départ est bien pris en compte, et bien rattaché sur le composant, et ensuite on peut agir sur ce score sur un hook, sans aucun problème. Donc ça, c'est uniquement pour vous le montrer. On va le supprimer, on va bien laisser pour le moment le score à zéro, parce que c'est un peu le but. Quand on démarre une partie, le score est à zéro.

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 !