Tutoriel pour apprendre à utiliser le framework Vue.js version 2

Pour intercepter les événements survenant au niveau de la vue, Vue.js offre la directive v-on.

Prenons un petit exemple pour introduire cette notion :

<div id="tuto">
  <a v-on:click="action">Cliquez ici !</a>
</div>

On a mis la directive v-on dans la balise a. Notez la syntaxe : on fait suivre le nom de la directive de deux points, du nom de l'événement, puis du nom d'une fonction. On comprend vite qu'on va appeler la fonction lorsqu'on clique sur le lien.

Voici le code JavaScript :

new Vue({
  el: '#tuto',
  methods: {
    action: function () {
      alert('On a cliqué !');
    }
  }
});

Nous découvrons une propriété pas encore rencontrée : methods. C'est ici qu'on va placer les méthodes de la VueModèle. Ici on a besoin d'une méthode action pour répondre à l'événement de clic.

Le résultat au clic est donc l'ouverture de la petite fenêtre d'information :

Voici une illustration de la liaison :

On commence à avoir de l'interactivité !

Il existe une syntaxe plus courte et bien pratique pour la directive v-on, il suffit de la remplacer par le caractère @, on écrira ainsi @click.

On peut aussi, au lieu d'une fonction, utiliser une expression comme argument de la directive v-on. Voici un exemple :

<div id="tuto">
  <h1> 
    <button class="button btn-primary" v-on:click="++n">+</button> {{ n }}
  </h1>
</div>

Cette fois on utilise un bouton et le même événement click. Mais au lieu d'une fonction on se contente d'incrémenter la variable n. D'autre part on affiche la valeur de cette variable avec mustache. Cette approche est à réserver à des traitements sommaires.

Voici le JavaScript :

new Vue({
  el: '#tuto',
  data: { n: 0 }
});

On initialise n avec la valeur 0 et on sait que sa valeur sera systématiquement répercutée dans la vue. Donc chaque fois qu'on clique sur le bouton la valeur affichée s'incrémente. Voilà l'aspect obtenu :

Voici une schématisation du fonctionnement :

Tous les événements disponibles avec JavaScript le sont évidemment aussi avec Vue.js, ce qui ouvre pas mal de perspectives au niveau de l'interactivité. Prenons un petit exemple pour un changement d'aspect au survol. Voici la vue :

<div id="tuto">
  <h1> 
    <span class="label" v-bind:class="type" v-on:mouseover="changeType">{{type}}</span>
  </h1>
</div>

On voit ici une nouvelle directive : v-bind. Elle permet de lier un attribut à une expression (mustache ne fonctionne pas pour les attributs avec la version 2). Ici on va donc pouvoir changer de façon dynamique  la valeur d'un attribut, ici une classe (ça serait la même chose pour du style).

D'autre part, cette fois l'événement utilisé est mouseover, autrement dit le déclenchement va avoir lieu au survol de l'élément par le curseur de la souris.

Pour avoir le visuel cet exemple nécessite Bootstrap. Donc prévoyez son chargement :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Voici le JavaScript :

new Vue({
    el: '#tuto',
    data: {
        type: 'label-primary'
    },
    methods: {
        changeType: function() {
            this.type = (this.type == 'label-primary') ? 'label-success' : 'label-primary';
        }
    }
});

On a dans les données la propriété type qui au départ a la valeur « label-primary ». À chaque survol de l'étiquette par le curseur de la souris cette valeur va changer, alternant entre « label-primary » et « label-success ». Du coup l'aspect à l'écran va aussi changer en conséquence.

D'autre part, on modifie aussi le texte de l'étiquette qui est relié à la même propriété.

Donc au départ on a :

Et ensuite :

Et ainsi de suite à chaque survol…

Voici une illustration du fonctionnement :

Il existe une syntaxe plus courte pour la directive v-bind, il suffit de la remplacer par le caractère « : », on écrira par exemple « :class ».

II-C-1. Les événements▲

<form @submit.prevent="onSubmit"></form>

<form @submit.stop.prevent="onSubmit"></form>

II-C-2. Les touches du clavier▲

<input @keydown.13="submit">

<input @keydown.enter="submit">

On va poursuivre l'exemple du chronomètre vu précédemment en lui ajoutant de l'interactivité. On va en profiter au passage pour découvrir la directive v-show très utile, qui permet de masquer des éléments du DOM à l'affichage. Voici la nouvelle version complète :

<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test vue.js</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>

    <div class="container">

      <div id="tuto" class="text-center">
        <h1>Le chronomètre</h1>
        <hr>
        <h1>
          <span class="label label-primary">{{ time.minutes }}</span> minutes
          <span class="label label-primary">{{ time.secondes }}</span> secondes
        </h1>
        <br>
        <p>
          <button class="btn btn-danger btn-lg" v-show="etat.backward" @click="backward">Effacer</button>
          <button class="btn btn-danger btn-lg" v-show="etat.stop" @click="stop">Arrêter</button>
          <button class="btn btn-primary btn-lg" v-show="etat.play" @click="play">{{ btnPlay }}</button>
        </p>
      </div>

    </div>

    <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

    <script>

      var vm = new Vue({
        el: '#tuto',
        data: {
          time: {
            minutes: 0,
            secondes: 0
          },
          btnPlay: 'Démarrer',
          etat: {
            stop: false,
            backward: false,
            play: true
          }
        },
        methods: {
          backward: function() {
            chronoReset();
          },
          play: function() {
            chronoStart();            
          },
          stop: function() {
            chronoStop();
          }
        }
      });

      var totalSecondes = 0;
      var timer;

      chronoStart = function() {
        timer = setInterval(function() {
          vm.time.minutes = Math.floor(++totalSecondes / 60);
          vm.time.secondes = totalSecondes - vm.time.minutes * 60;
        }, 1000);
        setEtat(false, true, false);
        vm.btnPlay = 'Continuer';
      };

      chronoStop = function() {
        clearInterval(timer);
        setEtat(true, false, true);
      };

      chronoReset = function() {
        totalSecondes = 0;
        vm.time.minutes = 0;
        vm.time.secondes = 0;
        setEtat(true, false, false);
        vm.btnPlay = 'Démarrer';        
      }

      setEtat = function(play, stop, backward) {
        vm.etat.play = play;
        vm.etat.stop = stop;
        vm.etat.backward = backward;        
      };

    </script>

  </body>

</html>

II-D-1. La Vue▲

<div id="tuto" class="text-center">
  <h1>Le chronomètre</h1>
  <hr>
  <h1>
    <span class="label label-primary">{{ time.minutes }}</span> minutes
    <span class="label label-primary">{{ time.secondes }}</span> secondes
  </h1>
  <br>
  <p>
    <button class="btn btn-danger btn-lg" v-show="etat.backward" @click="backward">Effacer</button>
    <button class="btn btn-danger btn-lg" v-show="etat.stop" @click="stop">Arrêter</button>
    <button class="btn btn-primary btn-lg" v-show="etat.play" @click="play">{{ btnPlay }}</button>
  </p>
</div>

II-D-2. Le JavaScript▲

var vm = new Vue({
  el: '#tuto',
  data: {
    time: {
      minutes: 0,
      secondes: 0
    },
    btnPlay: 'Démarrer',
    etat: {
      stop: false,
      backward: false,
      play: true
    }
  },
  methods: {
    backward: function() {
      chronoReset();
    },
    play: function() {
      chronoStart();            
    },
    stop: function() {
      chronoStop();
    }
  }
});

var totalSecondes = 0;
var timer;

chronoStart = function() {
  timer = setInterval(function() {
    vm.time.minutes = Math.floor(++totalSecondes / 60);
    vm.time.secondes = totalSecondes - vm.time.minutes * 60;
  }, 1000);
  setEtat(false, true, false);
  vm.btnPlay = 'Continuer';
};

chronoStop = function() {
  clearInterval(timer);
  setEtat(true, false, true);
};

chronoReset = function() {
  totalSecondes = 0;
  vm.time.minutes = 0;
  vm.time.secondes = 0;
  setEtat(true, false, false);
  vm.btnPlay = 'Démarrer';        
}

setEtat = function(play, stop, backward) {
  vm.etat.play = play;
  vm.etat.stop = stop;
  vm.etat.backward = backward;        
};

II-D-3. Le fonctionnement▲

Au départ on a cet aspect :

Lorsqu'on clique sur le bouton « Démarrer », le chronomètre se met en marche. Au niveau des boutons, « Démarrer » disparaît et « Arrêter » apparaît :

Lorsqu'on clique sur « Arrêter » le comptage s'interrompt, le bouton « Arrêter » disparaît. Les boutons « Effacer » et « Continuer » apparaissent :

Si on clique sur « Effacer » on revient à la situation de départ, et si on clique sur « Continuer » le comptage reprend et le bouton « Arrêter » réapparaît.

• On gère les événements avec la directive v-on. La syntaxe courte est « @ ».
• On peut ajouter des modificateurs aux événements.
• On modifie des attributs avec la directive v-bind. La syntaxe courte est « : ».
• On masque les éléments du DOM avec la directive v-show.