Vue.js est une bibliothèque très puissante, facile à apprendre et accessible qui, avec la connaissance de HTML, CSS et Javascript, nous permet de commencer à y créer des applications Web. Vue.js est construit en combinant les meilleures fonctionnalités des frameworks Angular et React existants. Il s'agit d'un framework Javascript progressif et réactif qui est utilisé pour créer des interfaces utilisateur (interfaces utilisateur) et des SPA (applications à page unique), c'est pourquoi les développeurs aiment coder et ressentir la liberté et le confort lors du développement d'applications dans Vue.js.If we jetez un œil à l'écoute et à la gestion des événements dans Vue.js., nous saurons qu'il fournit une directive v-on pour écouter et gérer les événements. Nous pouvons utiliser la directive v-on pour écouter le DOM et effectuer les tâches requises. Il fournit également de nombreux gestionnaires d'événements. Cependant, dans cet article, nous n'apprendrons et ne nous concentrerons que sur les événements de clic. Alors, commençons!
Tout comme l'événement onClick de Javascript, Vue.js fournit v-on:click pour écouter les événements.
La syntaxe de l'événement v-on:click serait la suivante :
< bouton v-on:clic='nom de fonction'>Cliquez sur</ bouton >
Vue.js fournit un raccourci @ au lieu d'utiliser également v-on.
< bouton @Cliquez sur='nom de fonction'>Cliquez</ bouton >
Vue.js ne se contente pas d'écouter l'événement click et d'appeler la fonction. Cela nous permettra également d'écrire directement toute opération arithmétique ou tout ce qui concerne Javascript à l'intérieur des guillemets. Juste comme ça:
< bouton @Cliquez sur='nombre += 1'>Ajouter</ bouton >
Vue.js nous permet d'appeler la méthode ou la fonction dans une instruction Javascript en ligne, comme indiqué ci-dessous :
< bouton @Cliquez sur='message('Bonjour')'> Afficher</ bouton >En utilisant les gestionnaires d'événements de Vue.js, nous pouvons également accéder à l'événement DOM, à l'aide d'une instruction en ligne, en passant la variable $ event spécialement fournie par Vue.js dans l'argument de la méthode, comme dans l'exemple ci-dessous :
< bouton @Cliquez sur='message('Salut', $événement)'>Envoyer</ bouton >
Vue.js nous permet également d'appeler plusieurs fonctions ou méthodes. Nous pouvons appeler plusieurs fonctions et les séparer par des virgules, comme cet exemple :
< bouton @Cliquez sur='first('Bonjour'), second('Bonjour', $event) '> Soumettre</ bouton >Vue.js fournit également des modificateurs d'événements.
Modificateurs d'événement
Nous avons souvent besoin d'appeler des modificateurs avec les événements. Ainsi, Vue.js fournit certains des modificateurs suivants :
.arrêter
Cela arrêtera la transmission de l'événement de clic.
< à @click.stop='faire ceci'></ à >.empêcher
Cela empêchera la page de se recharger ou de rediriger.
< former @submit.prevent='onSubmit'></ former >.une fois que
Cela ne déclenchera l'événement de clic qu'une seule fois.
< à @click.une fois='faire ceci'></ à >.Capturer
Il est principalement utilisé pour ajouter l'écouteur d'événement.
< div @click.capture='faire ceci'> ...</ div >Nous pouvons également enchaîner les modificateurs. Cependant, gardez à l'esprit que l'ordre des modificateurs est important et qu'il affectera les résultats.
< à @click.stop.prevent='faire ça'></ à >Conclusion
Dans cet article, nous avons couvert l'ensemble des concepts de gestion des événements Click, du niveau noob au niveau ninja. Nous avons appris les différentes syntaxes d'écriture des événements de clic et les différentes manières d'utiliser |_+_| directive fournie par Vue.js pour la facilité des développeurs et des différents modificateurs d'événements. Pour un contenu plus utile comme celui-ci, lié à Vue.js, continuez à visiter linuxhint.com.