Découvrir Vue.js 2

Modifier les évènements

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois qu'un évènement est en place, penchez-vous sur ses particularités. Ainsi, vous verrez s'il est possible de modifier un évènement en fonction du contexte.
05:03

Transcription

Lorsque vous allez utiliser les objets d'événement, on l'a vu, effectivement, on vient de voir ensemble un modificateur. Il faut savoir qu'il en existe d'autres. Alors, voici les modificateurs existants. Vous avez possibilité d'utiliser les modificateurs simples et les modificateurs un petit peu plus avancés. Je vais vous montrer des modificateurs d'événement. On a utilisé prevent pour notre part. Alors, prevent, qu'est-ce que ça permet de faire, ça permet d'annuler le comportement par défaut. Ça peut fonctionner sur un clic, ça peut fonctionner sur un formulaire, ça peut fonctionner à plusieurs endroits. Ça sera intéressant, par exemple, dans le cas d'un a. si vous ne voulez pas que ce soit le lien qui soit suivi, mais si vous voulez simplement pouvoir réagir à cet événement sans avoir, là encore, de chargement de page. Vous pourrez utiliser prevent de cette manière. Il faut savoir que les modificateurs peuvent également être utilisés à l'intérieur de l'événement, puisque vous avez accès, si vous ajoutez event sur votre fonction d'événement, vous avez accès à tout l'événement. Et ici, on a tout à fait accès à prevent default, qui est la valeur par défaut qu'on a sur un événement de base, mais, eh bien, Vue js nous permet de le faire sans avoir à le faire directement dans le javascript, mais on peut le faire au moment où on va déclarer l'événement. Donc, ici, c'est quand-même un petit peu plus sympa et puis c'est prévu, alors pourquoi on ne le ferait pas, c'est déjà prévu. Donc n'hésitez pas à faire comme ça, c'est beaucoup plus simple et beaucoup plus lisible. On a d'autres modificateurs d'événement qui existent, notamment le stop, le capture, le self, et le once. Tous ne vont pas fonctionner de la même manière, mais ça permet quand-même de récupérer des informations, ou alors d'agir différemment. Quand vous allez vouloir ajouter des événements au listener, c'est à dire à cet objet qui permet d'écouter, capture sera intéressant parce que on va pouvoir capturer un événement et on va pouvoir ajouter un event listener directement sur un événement au moment où on va cliquer. Donc c'est capture que vous utiliserez pour ajouter un événement aux event listener. Si vous voulez arrêter la propagation, je sais pas si vous savez ce que c'est la propagation, mais, concrètement, quand j'ai un lien, comme ça, si ce lien est contenu dans une autre div, le moment où je vais cliquer sur ce lien, et si j'ai quelque chose à l'intérieur du lien, ça va être propagé à ce quelque chose. Et ça c'est pas forcément agréable quand on veut travailler avec les éléments, par exemple je veux travailler avec un span quand je vais cliquer dessus, si j'ai un autre span à l'intérieur, je sais jamais ce que je vais récupérer, parce que, en fonction de l'emplacement de mon curseur à l'écran, ça va pas récupérer le bon. Vous pouvez utiliser stop pour éviter justement que cet événement se propage à autre chose que celui sur lequel il est placé, et à ce moment-là, vous récupérerez vraiment l'élément sur lequel vous avez cliqué, et qui possède ce listener. Sinon, ça risque de vous retourner tout et n'importe quoi. Donc, n'hésitez pas à utiliser le stop quand vous voulez arrêter la propagation. Vous faites simplement un point stop, et ça vous permettra de récupérer que l'élément sur lequel vous avez mis l'événement, uniquement. Le prevent on l'a vu, le capture on l'a vu. Le self qu'on a ici, alors ça c'est assez intéressant aussi, parce que ça permettra de récupérer les éléments qui vont se trouver au dessus sans avoir à récupérer l'élément directement dans le code. Donc ça permet en fait de placer des informations non pas sur les enfants, mais sur le parent réel, et c'est le parent qui va récupérer au moment du clic. Ça va un peu fonctionner comme le stopping de propagation, mais il va y avoir quelques petites modifications quand-même, parce que là, self permet vraiment de se placer sur un élément particulier, alors que généralement la propagation va l'utiliser sur les a. Donc, c'est généralement ici, quand on veut travailler sur des div, qu'on va utiliser le self, et puis rien d'autre. Ça va être utile essentiellement sur les div. Autre chose qui est apparue avec la version 2.1.4, celle sur laquelle on est en train de travailler, c'est le once. Alors, ça, once, c'est intéressant et pas intéressant, ça va être intéressant dans certains cas. Ça vous permet de donner une information à Vue js, et vous lui dites avec once de ne déclencher cet événement qu'une seule fois. Alors, dans notre cas, où est-ce qu'on pourrait l'essayer ? On pourrait l'essayer tout simplement dans notre composant game, ici, puisque on a ajouté ici le clic sur le rond, on pourrait lui dire de ne l'ajouter qu'une seule fois. Ça va faire sens pourquoi, parce que en réalité, quand on va cliquer sur le rond, on va gagner un point. Et nous on a pas envie de pouvoir cliquer plusieurs fois sur le rond. Alors, on verra quand-même que ça va être compliqué, parce qu'il va falloir détacher, rattacher ce composant à la volée, il va falloir d'ailleurs même créer un composant pour cette partie-là. En l'occurrence ici le clic ne peut être intercepté qu'une seule fois, il suffit simplement de rajouter point once, et à ce moment-là vous n'aurez qu'un seul clic qui sera intercepté une seule fois, au moment où vous allez cliquer. Donc ça c'est intéressant, et c'est important de l'utiliser pour éviter justement que l'événement soit soulevé plusieurs fois, et comme ça, vous aurez vraiment qu'un seul événement qui partira. Alors ça, on l'utilisera un petit peu plus tard, puisque on verra que quand on va créer le composant pour le rond, on va avoir à utiliser ça.

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 !