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

Écouter le clavier

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les écoutes sont également importantes. Apprenez à câbler un écouteur sur le clavier et à interagir avec les données entrantes.
05:29

Transcription

Dans la documentation, vous verrez qu'il y a également des modificateurs pour le clavier. C'est à dire qu'on peut écouter le clavier sur un événement. Alors, c'est bien et pas bien. Je vais vous expliquer pourquoi. Imaginons d'abord que, pour notre projet, nous souhaitions pouvoir avoir le alt-clic, par exemple. Donc quand je vais cliquer sur le rond avec la touche alt enfoncée, je voudrais qu'il y ait, effectivement, un événement particulier, par exemple un bonus clic, qui parte. Alors, ça c'est faisable. On va simplement ici se coder une petite méthode qui s'appellera bonus, qui sera donc comme d'habitude une fonction. Alors, une fonction anonyme. On peut lui mettre l'événement, si on le souhaite, comme ça. Et puis ici je vais simplement faire un petit console.log de l'event. Et on va venir ici cabler cet événement avec un modificateur clavier. Comment on va faire ? Il suffira simplement après le clic de faire un point, et d'ajouter un modificateur. On peut traquer tout un tas de choses, notamment on peut, sur un input, venir traquer toutes ces touches-là donc les touches up, down, left, right, space, espace, et échappe, delete, tab, enter. Mais on peut aussi tout à fait savoir si l'utilisateur a enfoncé une touche de son clavier en même temps qu'un clic, par exemple. Si on veut que ce soit le alt, il suffira d'utiliser le modificateur alt. Donc je vais l'implémenter, et je vais lui dire ici de m'envoyer le bonus. Alors, on va aussi mettre un console.log avec le terme bonus à l'intérieur, pour bien voir que ça passe, et on va enregistrer. Qu'est-ce qui va se passer, du coup ? Quand je vais cliquer tout simplement dessus, je vais avoir juste un clic, et si je clique avec alt, je vais avoir le bonus qui apparait. Je vais avoir le clic par contre qui va passer aussi. Vous voyez qu'ici, le clic, malheureusement, comme il est sur notre événement, passe également. Ça c'est le modificateur pour le clavier. Alors, c'est intéressant dans plein de cas différents, en fonction de la création de votre interface, mais il faut savoir que on ne peut pas, de base, venir traquer le clavier à l'intérieur d'une div, par exemple, ou à un emplacement particulier. En fait, on a pas la possibilité avec Vue js de pouvoir travailler sur cet aspect-là. Cela dit, on peut tout à fait, pourquoi pas, avoir une méthode qui s'appellerait start, qui serait une méthode qui se déclencherait avec l'événement et qui nous permettrait de savoir quelle touche est appuyée. Par exemple, si c'est la touche espace ou la touche entrée, on pourrait démarrer le jeu. Là on va faire un console.log, pareil, de l'événement, et il va falloir par contre le coder un petit peu de façon particulière. Vous allez devoir utiliser une méthode qu'on a déjà utilisé avant, et vous l'aviez déjà vu, cette méthode en fait on l'avait utilisée à cet endroit-là, donc on avait utilisé updated, on avait utilisé started. Started ça veut dire que ça démarre. Donc on va utiliser started, et on va ici mettre une fonction, et que va faire cette fonction ? Cette fonction va simplement référencer, sur notre document, le moment où un utilisateur va utiliser key down. Donc ça va être on key down. Et là on va lui dire que ça, ça va être égal à this start. Alors, toutes vos méthodes, elles sont déjà disponibles à cet endroit-là, ce qui veut dire que quand on va démarrer, on va pouvoir travailler avec sans aucun problème, et venir attacher une méthode. Ce qui fait qu'ici, quand mon utilisateur va appuyer sur une touche, je vais pouvoir traquer ensuite, directement. Alors, attention, parce que vous avez des méthodes sur les composants qui vous permettent de travailler, et vous avez des Hooks. Alors, quand vous ne savez plus comment on les utilise, vous pouvez aller chercher les hook functions ou les lifecycle hooks et vous allez tous les voir ici. Voilà, c'est created, et pas started, faites très attention, c'est created. N'hésitez pas à vous munir de la documentation et à aller regarder à chaque fois, parce que là c'est très bien, on a absolument tous les événements possibles, et on vous donnera à chaque fois le détail. Quand est-ce que ça démarre, etc. Donc là, quand vous avez utilisé created, vous lui avez rattaché sur le document, c'est à dire le projet complet, on key down, vous allez voir qu'effectivement, au rechargement, peu importe la touche sur laquelle vous allez appuyer, vous allez avoir l'information. On peut ensuite traquer vraiment la touche. On sait que c'est la touche entrée qui nous intéresse, donc on peut tout à fait ici venir lui dire if event point, et alors vous allez regarder votre événement, pour récupérer la bonne information, et votre information actuellement c'est la clé, la key, que vous avez là. Et la key vous l'avez à cet endroit-là. Donc on peut tout à fait lui dire if key égal égal égal et c'est enter qui nous intéresse, Enter, à ce moment-là, on pourra lui dire console.log et start, pour bien voir que tout est OK. Donc ça vous permet de cabler des méthodes et puis de pouvoir récupérer l'information. Alors, si j'appuie sur n'importe quelle touche, ça fera rien. Par contre, j'appuie sur entrée, et là ça va démarrer mon jeu. Vous voyez qu'il est très facile de venir traquer le clavier. Par contre, attention, vous serez obligés de le faire ici, au démarrage de votre composant, c'est obligatoire, et vous serez obligés d'attacher en fait un listener, qui est un listener du dom, avec une méthode par contre que vous avez déclarée à l'intérieur de votre composant. Vous voyez, c'est un espèce de mix des deux, mais ça marche très très bien, et ça vous permet de créer des interfaces réactives, et surtout de venir travailler avec les raccourcis clavier, et pourquoi pas fournir quelque chose de très dynamique dans votre interface.

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 !