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

Utiliser l'objet d'évènement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'objet d'évènement utilise des méthodes qui lui sont propres. Utilisez ces méthodes pour dialoguer avec plusieurs éléments dans la page.
06:23

Transcription

On a vu qu'il est très simple de réagir. Alors, s'il est très simple de réagir, ça veut dire que on va pouvoir assez facilement venir réagir à notre formulaire. Parce que c'est le formulaire qui va nous intéresser. Ce qui serait intéressant c'est qu'on puisse réellement travailler sur le player, et qu'on puisse ajouter un vrai nom, et quand je vais soumettre, récupérer ce nom. Comment on va se débrouiller ? On sait déjà que on va devoir utiliser un v on. Et quel est l'événement sur un formulaire ? C'est submit. Ça veut dire qu'il va falloir coder une méthode pour pouvoir ajouter le nom du joueur. Donc on va faire une méthode set player qui va s'occuper de venir faire la mise à jour. Dans ce cas-là, créons une première méthode, dans methods, avec donc cette fonction anonyme. Alors, attention, vous devez d'abord ouvrir l'objet, ensuite penser à la virgule, et puis ajouter la méthode set player. Quand vous aurez cette méthode-là, on va la référencer. C'est donc une fonction anonyme. Et puis ici on va carrément lui dire à cette fonction d'utiliser l'event. Quand on aura fait cette partie-là, on va afficher simplement notre événement, et puis on va pour le moment pas faire plus de choses que ça. Alors, vous allez vous rendre compte que cet objet d'événement qu'on utilise, le v-on, avec des événements qu'on a ici, on va pouvoir le customiser un petit peu. Il y a plein de méthodes qui existent dessus, qui sont très intéressantes pour nous, et je vais vous montrer pourquoi on va devoir obligatoirement utiliser une méthode. Regardez ce qui se passe. Un formulaire, ça fait quoi ? Un formulaire de base, la soumission, ça a pour but de recharger la page. Et regardez ce qui se passe, c'est que on a le player qui s'affiche en haut. Nous, on veut pas ça. On aimerait bien que ça s'arrête. Il faut savoir que sur les événements, et sur l'objet d'événement, vous avez possibilité ici d'utiliser un point, et d'utiliser toutes les méthodes un peu classiques qu'on a sur les événements, notamment une méthode très importante, c'est le prevent default, qui permet de détruire la correspondance par défaut d'un événement dans le navigateur, et donc de l'annuler. On va donc utiliser simplement prevent, comme ça, et en utilisant prevent, vous allez détruire le fonctionnement classique du submit. Ce qui va avoir pour effet de ne plus recharger la page. Ce qui, pour le coup, nous intéresse. Voyez qu'ici, voilà, on ne recharge plus la page. Alors c'est bien, parce qu'on peut voir maintenant que l'événement passe à chaque fois. Qu'est-ce qu'on va faire ? On va récupérer le nom du joueur et on va l'appliquer. Alors, c'est assez facile, en réalité. Sur l'événement, si vous le regardez, si vous entrez à l'intérieur, vous verrez que, dans votre événement, vous allez avoir ici la target, la target c'est le formulaire, et que votre input, c'est à dire celui qui contient le nom du joueur, il est positionné en zéro dans la target. Pour récupérer la valeur du champ, ça va être facile. On va simplement ici faire this player qui va être égal du coup ici à event point target, puisque c'est le formulaire. Ensuite on va chercher le zéro, zéro va représenter l'input, et on va simplement demander la valeur. Et pour que ça fonctionne, et pour qu'on voie bien que ça fonctionne, on va faire un console.log ici de notre joueur, this.player. Alors, à tous les coups, là, on va récupérer la valeur, il y aura pas de problème. On va recharger la page un petit coup. On va faire ici Julien, et on va faire jouer. Et regardez : on a bien effectivement Julien qui s'affiche, donc ça c'est bon; par contre, on a rien au niveau du fonctionnement. On est bien d'accord que ce qu'on avait défini ensemble c'est que, lorsque il y a un joueur qui vient de s'enregistrer et qui vient de cliquer sur jouer, normalement, on devrait ici avoir, au niveau de notre player, le message qui s'affiche et le formulaire qui se cache. Mais c'est pas fonctionnel. Pourquoi c'est pas fonctionnel ? Il faut savoir que définir une variable de cette façon-là, dans la méthode created, par exemple, ne vous permet pas de rendre cette variable réactive. Pour rendre une variable réactive, vous serez obligés de passer cette variable dans les data. C'est obligatoire si vous souhaitez avoir de la réactivité. Donc, on va le faire. On va simplement ici faire un return d'un objet, et dans cet objet qu'est-ce qu'on va mettre ? On va mettre le player, qui au début, à l'arrivée sur le programme, ne sera pas du tout égal à quelque chose. Donc on va simplement rien mettre dedans, on va démarrer un player inactif. En faisant ça, vous allez avoir ici un comportement qui va être différent, puisque quand je vais faire jouer, ça va bien m'ajouter un player, ça va me cacher le formulaire. Par contre, regardez, on a encore un problème. Le problème qu'on a c'est que c'est pas le joueur qui s'affiche. Or, c'est pas ce qui devrait s'afficher. Ce qu'on devrait avoir, c'est « Bonjour this player », avec le nom du joueur. Qu'est-ce qu'on va faire pour le changer ? Alors, d'abord, on va rendre le welcome message réactif. Vous savez faire, maintenant. Welcome message égal à rien du tout, pour le moment. Et on va pas utiliser la méthode created, on va utiliser la méthode updated. Parce que à chaque fois que vous allez mettre à jour une valeur réactive dans l'interface, il y a un rechargement qui est effectué, et, pour vue.js, il se passe une mise à jour. Donc, l'updated est une méthode qui est déclenchée à chaque fois que vous avez une mise à jour dans l'interface. Ce qui fait qu'on va ici supprimer cette partie-là, parce qu'on est persuadés qu'à l'update, il y aura un joueur, et on va supprimer également cette partie-là, qui ne nous intéresse absolument pas, puisque tout ce qu'on veut c'est que ça nous constitue la phrase et que ça l'affiche. On enregistre cette partie-là. Étant donné qu'on a rendu le welcome message dynamique, le fait de le changer ici va le rendre dynamique aussi au-dessus, et maintenant, on va recharger notre interface, on va taper Julien, on va faire jouer, et cette fois-ci, on a bien « Bonjour Julien ! » qui s'affiche et tout fonctionne. Si vous voulez aller un petit peu plus loin avec les événements il y a une très bonne page du tutoriel ici qui s'appelle Reactivity in Depth. Ça c'est vraiment génial, il faut absolument lire cette partie-là, parce que vous avez absolument toutes les méthodes qui sont décrites. Bien sûr on va avancer encore un petit peu ensemble, mais n'hésitez pas à aller regarder ça, ça vous donnera beaucoup beaucoup d'infos. Bon, on a fait fonctionner le formulaire. Ça veut dire qu'on commence à avoir une interface qui devient réactive et qui devient intéressante pour nous. Ne laissez pas trainer les console.log, ça ne sert à rien. Reprenez bien ce code, si vous n'avez pas tout repris. Il faut absolument que vous en soyez à ça, vraiment que ça fonctionne, pour que vous puissiez avancer.

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 !