Découvrir Vue.js 2

Ajouter des méthodes à la mise à jour

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Tout comme les évènements, vous pouvez vous câbler sur les mises à jour des objets. Découvrez les techniques de mise en place des méthodes de modification.
08:14

Transcription

Ce qu'on a fait pour mettre à jour, c'est pas mal, mais moi j'aimerais qu'on améliore encore un peu le concept. Parce que, ce qu'on fait là tout de suite c'est bien, mais on le fait dans une seule méthode, et puis il y a pas mal de choses que ça ne permet pas de faire, tout simplement, et puis surtout, on peut pas savoir si l'utilisateur s'est trompé, ce qu'il a cliqué dans l'interface. On va déjà faire ça. On va ici prendre cette partie-là et puis on va se créer un clickOn et Interface. Voilà, ici, interface. Comme ça, on sera en capacité de savoir s'il a cliqué sur le bonus, si il a cliqué sur l'interface, ou si il a cliqué au bon endroit. On va ici se coder une fonction et puis vous imaginez bien que, même quand il clique sur l'interface, il s'est trompé, on va quand-même devoir vérifier et répercuter les informations, pour changer de place le Round. Ça lui donnera pas de points, mais il aura quand-même, on aura quand-même besoin de savoir qu'il a cliqué dessus, et on devra changer les informations. Alors, si je fais ça, ça va fonctionner sans aucun problème, regardez, on va prendre cette partie-là, on va la recopier ici, et puis on va simplement mettre une information pour qu'on soit bien en capacité de savoir que c'est sur l'interface qu'il a cliqué. Effectivement ici, si je clique là, c'est l'interface. Mais si je clique là, le problème c'est que c'est l'interface aussi à regaver. Ça va s'incrémenter. Alors, ça c'est embêtant, mais c'est pas compliqué, on peut le changer assez simplement Souvenez-vous, on a possibilité de dire qu'on ne veut pas de répercussions. Et pour dire qu'on veut pas de répercussions, on va utiliser quoi ? On va utiliser stop. Donc pour utiliser stop, on va simplement l'ajouter ici en tant que modificateur. Et puis tant qu'on y est, on va le mettre également à cet endroit-là, ce qui nous permettra d'avoir soit le clic effectivement sur le rond, qui ne répercutera pas sur l'interface, soit sur l'interface, soit maintenant sur le bonus. On a les trois à disposition. Voyez que quand on clique sur le bonus, ça active bien le bonus, donc on sera en capacité de faire quelque chose avec, mais ça change bien le rond. Ça, ça marche parce que c'est un clic, donc forcément ça intercepte aussi le clic. Alors, moi maintenant ce qui m'embête un petit peu dans ce qu'on a fait là, c'est qu'on a pas de moyen facilement de changer l'élément. C'est à dire que, toute cette partie-là, elle est intéressante, mais on va devoir la re-répercuter derrière. Vous imaginez, il va falloir faire la copie de code. Dès que vous avez ça, ça veut dire qu'il y a une méthode que vous pouvez mettre en place obligatoirement. Qu'est-ce qu'on voit ? On voit qu'on a des événements à chaque fois. Donc, l'événement va nous permettre de récupérer l'élément. Ça c'est sûr, on peut récupérer l'élément. Mais il y a peut-être une meilleur façon de faire pour récupérer un élément. Effectivement, on va pouvoir utiliser les références. Alors, pour utiliser les références, il va falloir simplement utiliser une propriété et je vais vous montrer où elle se trouve, c'est assez simple à voir. Alors, ici vous avez l'événement qu'on vient répercuter, mais ici on pourrait simplement faire un console.log ici de this, pour avoir le code du coup complet voilà, du composant, et on voit que sur le composant, ici, on a des refs. Voyez, ici, les refs sont les références. Si je veux utiliser une référence sur un élément, je vais simplement faire ref comme ça, je vais lui dire que c'est un round, et ça ça va être disponible absolument partout. Ça, ça m'intéresse bien. Pourquoi ? Parce que je vais avoir envie, de toute façon, de récupérer cette information, et donc de récupérer la référence. Mais comment je vais récupérer la référence ? Eh bien, à n'importe quel endroit, par exemple là sur l'interface, je peux simplement récupérer console.log ici, je vais pouvoir récupérer toutes les références, et pour faire ça, je vais utiliser this.refs. En faisant this.refs, je fais recharger, quand je vais cliquer sur l'interface ici, alors, attention, parce que on a pas enregistré, mais quand je vais cliquer sur l'interface à cet endroit-là, je vais avoir undefined, et du coup, est-ce que ça va me permettre de récupérer toute l'information, non. Parce que les refs qu'on a là, c'est undefined. Alors, pourquoi ce undefined ? Tout simplement parce que, regardez, ici, vous devez les chercher avec, vous voyez, un petit dollar. Si vous allez pas chercher avec un dollar, vous les aurez jamais. Donc faites très attention à la syntaxe, elle est très importante. Ici, je vais cliquer, je vais récupérer effectivement mon round. Donc ça c'est bien, parce que je vais pouvoir agir tout de suite sur mon élément. Maintenant qu'on a ça, on va réfléchir à une méthode qui va nous permettre de mettre à jour peu importe où on se trouvera. Et cette méthode-là, c'est la plus simple, c'est de mettre à jour des data et de vérifier qu'on a une vraie mise à jour. Comment on fait ? Simplement, on va référencer une data ici qui sera le nombre de clics. Et on va l'incrémenter. Et à chaque fois qu'il y a un update, on changera la position. Alors, comment on va implémenter ça ? On va retourner un objet ici avec click, on va le mettre à zéro de base, et à chaque fois qu'on va tout simplement cliquer sur n'importe quoi, c'est à dire soit le clic en round, ici, là on va pouvoir faire un this.click++, et puis on va faire pareil pour le bonus. Alors, est-ce qu'on a besoin vraiment ? Non, parce que le bonus, ce sera aussi un clic, mais sur le clic en interface, on va le faire aussi. À cet endroit-là. Et puis, on va ici utiliser updated, comme ça, qui sera une fonction également, et on va simplement demander ici de nous afficher un console.log console.log, du coup, de this.click. C'est bien, parce qu'on va voir tout ça se modifier dans l'interface en direct. Faites alors attention. Comme d'habitude, on enlève les points-virgules, on en met pas, et on va revoir ici dans la console les modifications. Donc là on voit qu'effectivement, on a bien quelque chose qui intervient. Par contre, on a pas le ++, on a pas l'update. Alors, pourquoi on a pas l'update ? Parce que, actuellement, vous n'êtes pas en train de regarder une propriété. Et ça c'est extrêmement important. Si vous voulez regarder une propriété, c'est pas updated que vous allez utiliser, c'est watch. En faisant watch, vous allez démarrer ici le watch sur quelque chose. Alors, ce quelque chose, faudra le coder. Nous, ça va être click qu'on va coder, et sur le clic, on va lui dire que c'est une fonction, ici, et on va lui demander de nous faire un console.log de this.click, et là on va avoir un vrai fonctionnement. Alors, attention encore une fois à la syntaxe, faites très attention partout, on est obligés d'avoir une syntaxe propre. Maintenant, regardez. À chaque fois que je vais cliquer quelque part, je vais avoir le chiffre qui s'incrémente. Ça veut dire, concrètement, que je vais pouvoir utiliser très facilement la mise à jour à l'intérieur de mon watch. Alors, on va supprimer les console.log qui servent pas à grande chose, ça non plus ça sert à rien, là on est OK, et ici on va pouvoir appeler une méthode qui va simplement mettre à jour, donc on va supprimer tout ça aussi, mettre à jour notre référence, donc simplement notre round. Alors, on va coder une nouvelle méthode ici qui s'appellera updateRound. Ce sera une fonction, ça prend rien du tout, ça va simplement utiliser l'élément, et l'élément qu'est-ce que ça va être ? Ça va être this.refs.round et comme ça vous allez agir sur l'élément à chaque fois que vous allez mettre à jour. Et, dans le watch ici, vous allez pouvoir appeler this .updateRound et vous venez de coder quelque chose de complet qui va fonctionner tout seul. Attention encore au point-virgule, décidément, j'aime les points-virgule, visiblement, et regardez, à chaque fois que je vais cliquer, si je clique sur le rond, c'est bon. Si je clique sur l'interface, ça marche aussi, et du coup je vais pouvoir avoir un jeu qui fonctionne même si je me trompe au niveau des clics dans l'interface. Alors après, forcément, à moi de gérer ça pour donner des points ou pour en enlever Et c'est là que ça va être intéressant, aussi, Il va falloir travailler là-dessus. Mais vous voyez qu'on a possibilité de venir travailler des méthodes de mise à jour un peu complexes, et surtout de se baser sur des éléments que l'on référence. Ça c'est très important, le référencement d'éléments, qui vous permet de faire une modification globale sur un élément à différents endroits. Et qu'est-ce qu'on a utilisé pour faire ça ? Simplement le fait de référencer une data, de la mettre à jour, et de regarder quand elle se met à jour. Et simplement, une fois que le clic se met à jour, on peut déclencher une fonction. Vous voyez que c'est extrêmement simple à coder. Ça demande un petit peu de pratique, évidemment, mais on peut faire des choses très puissantes en très peu de temps.

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 !