Les templates, les boucles et les conditions avec vueJS

Aujourd'hui on va voir comment afficher utiliser les templates, les boucles et les conditions sous vueJS.
On repartira du code crée dans le précédent tutoriel.

Mapper une propriété à un élement de votre template

Le but du jeu sous vueJS va être de faire en sorte que vos propriétés soient utilisé par les éléments de votre template pour les rendre dynamiques. Ainsi, on va pouvoir par exemple via un formulaire, modifier la valeur d'un titre (qui sera une data dans votre application vuejs).
vuejs va voir que la valeur de votre data "titre" sera modifié et, il modifiera alors le template en conséquence. Vous aurez alors l'impression d'éditer en "temps réel" votre titre. Nous allons voir comment faire ceci dans cette premiere étape.

On va commencer par créer notre attribut titre et l'afficher, en modifiant notre composant src/App.vue comme ceci :

<template>
  <div id="app">
    <h1>{{ title }} </h1>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application'
        }
  }
}
</script>

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

Pas besoin de vous réexpliquer ce qu'on fait ici normalement, car suivi le tutoriel précédent :)
On a donc dis ici à vueJS que dans le H1, on mettre le contenu de la valeur de notre propriété "title". Chaque changement de title, fera qu'il actualisera le H1.

Modifier une propriété vuejs via un formulaire

On va maintenant rajouter notre formulaire qui viendra modifier la valeur de notre propriété "title". Pour cela, on va lui définir un attribut v-model, qui permet de relier la valeur d'une propriété à notre input.

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

Vous verrez donc que par défaut la valeur de votre champs texte sera "Titre de mon application" et si vous modifiez cette valeur, la valeur du H1 sera modifié en même temps. ce qui vous donne cette impression de "temps réel" qui nous plait tellement dans vueJS.

Voici le résultat :

Faire une boucle avec VueJS

Maintenant comment faire pour afficher le contenu d'un tableau avec VueJS ? Imaginons qu'on ait une liste de taches à faire et qu'on veuille les afficher une par une, voici comment faire.


La premiere étape va etre de créer notre liste de course dans les data comme ceci :

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room' },
            { title: 'Go to the grocery' },
            { title: 'meeting with JP' },
            { title: 'Go to the dentist' }
          ]
        }
  }
}
</script>

Puis on va les afficher en modifiant notre template comme ceci :

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

    <h2>Task List</h2>
     <ul id="task-list">
       <li v-for="task in tasks">
         {{ task.title }}
       </li>
     </ul>

  </div>
</template>

Ici j'ai rajouté un Ul dans lequel j'ai ajouté un élement li qui contient l'attribut v-for qui fonctionne comme un foreach, cela permet de boucler sur les éléments de ma data tasks, chaque élement sera accéssible à l'intérieur de cette boucle via la varaible "task" (qui sera un objet javascript avec une propriété "title").
j'affiche ensuite la propriété title de mon objet "task". à l'intérieur.

Les IF avec VueJS

Maintenant qu'on a affiché notre list de taches à faire, on va mettre la tache "meeting with JP" en rouge. Pour cela dans notre boucle on va tester si le titre de la tache est "meeting with JP" et si oui, on le met en rouge. sinon on ne fait rien.
pour cela on utilise la directive v-if et v-else comme ceci :

      <span v-if="task.title == 'meeting with JP'" style="color:red;">
            {{ task.title }}
      </span>
      <span v-else>
            {{ task.title }}
     </span>
         
 

Ce qui nous donne pour notre application, un fichier src/App.vue comme ceci :

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

    <h2>Task List</h2>
     <ul id="task-list">
       <li v-for="task in tasks">

          <span v-if="task.title == 'meeting with JP'" style="color:red;">
                {{ task.title }}
          </span>
          <span v-else>
                {{ task.title }}
         </span>

       </li>
     </ul>

  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room' },
            { title: 'Go to the grocery' },
            { title: 'meeting with JP' },
            { title: 'Go to the dentist' }
          ]
        }
  }
}
</script>

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

Voici le résultat :

Afficher ou masquer un élément avec la directive v-show de VueJS

La directive v-show permet d'afficher ou de masquer un élément en fonction d'une propriété.
Imaginons qu'on veuille masquer la tache "Go to the grocery", on ajoute dans chaque tache, une propriété "display", qui sera à true ou false.

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room', display:true },
            { title: 'Go to the grocery', display:false },
            { title: 'meeting with JP', display:true },
            { title: 'Go to the dentist', display:true }
          ]
        }
  }
}
</script>

On vient ensuite utiliser la directive v-show au niveau du if, cette directive rajoutera un attribut css display à true ou false en fonction de la condition que vous mettez dedans.
Ici on va lui dire d'afficher nos éléments si task.display est à true.

<span v-if="task.title == 'meeting with JP'" style="color:red;" v-show="task.display==true">
    {{ task.title }}
</span>
<span v-else v-show="task.display==true">
    {{ task.title }}
</span>

Voici le résultat :



et ca marche !

Félicitation vous savez maintenant faire un IF et un FOR, utiliser une propriété et modifier sa valeur via un formulaire avec vueJS !
Voilà c'est la fin de ce tutoriel, n'hésitez pas à laissez vos commentaires et à poser vos questions. Le code est téléchargeable ci dessous.