Découvrir Vue.js 2

Appréhender les évènements de Vue.js

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Initiez-vous au fonctionnement du moteur d'évènements de Vue.js. Grâce à cette vidéo, apprenez également à vous en servir.
04:26

Transcription

Pour travailler avec les événements, d'abord on va devoir modifier un tout petit peu notre vue actuelle pour avoir quelque chose qui ressemble à ça. Alors, je vous montre les modifs qu'ont été faites, qui sont pas énormes non plus. On a ajouté un span round ici, qui se trouve dans la div et classe, et ça, c'est ce qui va nous permettre de créer le jeu. Le jeu va être simple, on va cliquer sur des ronds, et puis, une fois qu'on aura cliqué sur le rond, il va s'effacer. Un autre va apparaitre, il faudra cliquer dessus, etc. etc. Ça va ajouter des points à l'interface. Après, on pourra faire évoluer la logique, évidemment. Pour le moment, ça donne ça. Au niveau du game, on voit que il y a un width et un height qui a été placé, un display et puis un background, ici. Pour le round aussi on a quelques petites notions CSS qui permettent d'avoir quelque chose d'un peu plus joli. Pour le app, on a également ajouté un height à 1000 pixels et un display block, histoire d'avoir un vrai espace qui puisse fonctionner. Alors, à partir de là, on se retrouve avec cette interface. Ce qui serait intéressant pour nous ce serait de pouvoir vérifier le clic quelque part. Et ça, c'est de l'événement. Pour utiliser les événements avec vue js, vous allez devoir utiliser encore une fois une directive. Et oui, c'est les directives qui vont nous permettre de travailler sur les événements. Vue js a déjà un moteur d'événements qui est disponible, et ce moteur d'événements va être très simple à utiliser. Il va suffire d'utiliser v-on, v tiret on, et de décrire ici en argument de v-on l'événement que l'on souhaite traquer. Nous, en l'occurrence, ça va être le clic. On sait que on va vouloir travailler avec le clic, et que lorsque on va utiliser le clic, on va vouloir faire quelque chose. Alors, le faire quelque chose est un petit peu particulier, parce qu'évidemment, il va falloir qu'on puisse avoir une méthode particulière qui sera déclenchée. Vous n'avez actuellement, sur votre composant game, aucune méthode. Il va falloir donc créer des méthodes. C'est un petit peu particulier, mais quand vous aurez fait, vous verrez que c'est pas compliqué. Va suffire d'utiliser ici un nouveau paramètre dans notre objet de composant, qui s'appelle methods avec un s, qui est un objet, et qui va venir, au même titre que les directives, définir des méthodes différentes. Ici, on va se définir une méthode qui va s'appeler clickOnRound. Et cette méthode, qu'est-ce que ça va être ? Tout simplement une fonction anonyme. Vous vous souvenez, c'est exactement toujours pareil. Une fois que vous avez compris un peu le truc, ça marche toujours de la même manière. Ici on va pouvoir aussi, pourquoi pas, traquer l'événement. C'est pas un problème, on peut aussi vérifier ce qu'on a dans l'objet d'événements, et pour travailler avec, il suffira de le passer à cet endroit-là. Ici, nous on va simplement faire un console.log et on va marquer click, pour être persuadés que tout fonctionne bien et qu'il y a pas de soucis. Alors, maintenant on va répercuter cette méthode au niveau du clic. Donc on va demander à Vue, au moment du clic, de déclencher la méthode clickOnRound. Quand vous aurez codé ça, ça va fonctionner tout seul. Donc une méthode, simplement, qu'on vient rattacher sur un événement, donc c'est les événements classiques du dom qui vont pouvoir être traqués par v-on. On va enregistrer cette partie-là. Alors, on fera attention, bien sûr, voilà, le petit point-virgule, c'est la petite erreur, on voit qu'ici, effectivement, ça c'est chargé, on va recharger pour pas avoir de problèmes, et maintenant on va aller cliquer. Et effectivement, à chaque fois que je vais cliquer, cet événement va être levé, et on va avoir le déclenchement de notre méthode qui va s'effectuer. Pour le moment, on a pas de logique métier derrière, l'idée est essentiellement de comprendre qu'effectivement, on a bien un objet d'événement avec lequel on va pouvoir travailler. Cet objet d'événement est simple. Il suffira uniquement de venir travailler sur l'événement et de demander le déclenchement d'une fonction. Donc vous codez votre logique métier dans votre méthode, et vous rattachez l'événement dans le template. Donc il y a en fait deux parties qui sont distinctes mais qui fonctionnent ensemble. L'événement défini dans le template, et la méthode appelée dans la logique métier. Si vous avez compris ça, on peut continuer. Et là on va commencer à implémenter un peu plus de logique. Qu'est ce qui nous intéresse vraiment ? Maintenant ça va être de traiter le formulaire, parce que, pour le moment, à aucun endroit on vient travailler vraiment sur ce formulaire, pour ajouter le player. Ce serait bien qu'on le fasse.

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 !