Les événements VueJS

On se retrouve maintenant pour parler des événements avec vueJS. Comme pour les lesson d'avant, on repart du code du précédent tutoriel. Les événement vous permettent lors d'un événement (un clic dans une zone, le passage de la souris au dessus d'une zone, quand vous pressez une touche) de déclencher un traitement particulier lorsqu'une action se produit.

La balise v-on de vuejs

Afin d'observer certains événéments sous vuejs on peut utiliser la fonction "v-on". Lorsqu'on délenche un événement sur un elements DOM vuejs délenchera alors la fonction associée.

Par exemple le code suivant (/src/App.vue):

<template>
  <div id="app">
    <h1>{{ title }} </h1>
     <input v-model="title" v-on:click="callMethod">
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application'
        }
  },
  methods: {
    callMethod : function (event){
        alert('Hello : '+ this.title);
    }
  }

}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vous voyez ici v-on:click="callMethod" qui permet de dire à vueJS "sur mon élément input, a chaque événement "click", tu vas lancer la méthode "callmMethod".
Vous pouvez également le faire avec l'événement "change" comme ceci pour délencher la fonction à chaque fois que le contenu du champs texte change:

<input v-on:change="callMethod">

et avec l'événement "keyup" comme ceci pour délencher la fonction à chaque fois qu'on tape sur une touche et que l'élément est sélectionné:

<input v-on:keyup="callMethod">

La méthode callMethod va elle, récupérer la data "title" et l'afficher en mettant un "Hello: " au début.

Les modificateurs d'événements vueJS

Souvent quand vous souhaitez faire un traitement suite à un événement, vous devez appeler un méthode javascript comme event.preventDefault() par exemple. Pour vous éviter ce travail, et pour simplifier votre code, Vue à prévu ce qu'on apelle un "event modifier" pour la fonction v-on.
Il suffit de mettre un des mots clefs suivants apres le nom de l'evenement dans votre déclaration v-on :

- stop arrété la propagation du click

 <input type="submit" v-on:click.stop="callMethod">
 

- prevent empéche l'événement submit de recharger la page

<input v-model="prevent" v-on:click.self="callMethod">

- capture permet de capturer les événements qui se produiraient dans les éléments "fils"

<input v-model="title" v-on:click.capture="callMethod">

- self ne lance la fonction sur cet element que si l'événement est bien sur cet eleme,t et pas sur un des élément "fils"

<input v-model="title" v-on:click.self="callMethod">
     

- once assurer que l'evenement ne sera lancé qu'une seule fois.

 <input v-model="title" v-on:click.once="callMethod">
 

Les modificateurs d'événement peuvent être combinés quand ils sont écrits à la chaine. Comme ceci :

 <input v-model="title" v-on:click.stop.prevent="callMethod">
 

Les modificateurs de touches vueJS

Lorsque vous voulez capturer les touches du clavier qui ont été tapées par l'utilisateur, vuejs met à disposition des instructions spécifiques appellées "key modifiers".
Ces instructions vont etre utilisés comme les events modifiers mais au lieu de les mettre à la suite des événements javascript standards (onclick etc..), on ne peut les utiliser que sur les evenements spéicfiques aux keyboard (keyup, keydown, ...).

Exemple, si je veux lancer ma méthode callMethod sur lorsque dans le champs texte j'appuie sur la touche "1" (code 49) je vais faire ceci :

<input v-on:keyup.49="callMethod">
    

Certains code ont un alias, pour la touche "entrée" je vais faire ceci :

<input v-on:keyup.enter="callMethod">
    

Cela va fonctionner avec les touches ".enter",".tab",".delete",".esc",".space",".up",".down",".left" et ".right". Vous pouvez également faire des combinaisons de touches avec les touches : ".ctrl",".alt",".shift" et ".meta" (touche windows, pomme, cmd, appelez la comme vous voulez ;) ). Exemple de combinaison avec ces touches, si je fais "control" + "a" (code: 65 ) :

<input v-on:keyup.ctrl.65="callMethod">
    

et on peut les chainer tous ensemble. Si je fais "control" + "alt" + "a" (code: 65 ) :

<input v-on:keyup.ctrl.alt.65="callMethod">
    

Pour récupérer le code d'une touche, vous pouvez aller sur le site "keycode.info". Et voilà vous savez maintenant utiliser les évenements vuejs maintenant c'est à vous de jouer !