---

Aujourd'hui nous allons voir certaines Directives VueJS et leur application dans un projet. Vous pouvez retrouver la liste des Directives ici

Comme nous l'avons vu dans l'article précédent , les Directives sont des attributs HTML spécifiques à VueJS. Les Directives sont des instructions pour VueJS lui indiquant de faire certaines choses. Cette définition peut paraître un peu floue, nous allons donc rapidement rentrer dans le vif du sujet avec quelques exemples concrets :

VueJS Directives

Liste des Directives que nous allons aborder dans cet article :

• v-html
• v-show
• v-if / v-else-if / v-else
• v-for
• v-on
• v-model

Toutes les Directives VueJS ont un point commun : elles commencent toutes par 'v-' afin de les différencier des autres attributs. Cependant, certaines ont aussi une forme abrégée. C'est notamment le cas de 'v-on' qui peut aussi s'écrire '@' dans sa forme courte.

Syntaxe & Utilisation

Pour ajouter une Directive à un élément, il suffit de la rajouter comme un attribut HTML classique. Il est aussi possible de lui attribuer une expression.

<div>Pas d'attribut VueJS</div>
<div v-html="html">Attribut VueJS</div>

v-html

Attention. Cette directive permet de modifier le code de votre page, il est donc essentiel de faire attention à son utilisation ! En effet, un utilisateur mal intentionné pourrait effectuer une [attaque XSS] (fr.wikipedia.org/wiki/Cross-site_scripting) dans certaines conditions.

La Directive 'v-html' permet d'afficher et de rendre du code HTML.

<section id="app">
  <div v-html="`<h1>Hello</h1>`">
  <div v-html="html">
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      html: '<h2>Hello from Data !</h2>',
    }
  });
</script>

v-show

La Directive 'v-show' permet de cacher ou afficher l'élément, tout en conservant l'élément dans le DOM

<section id="app">
  <div v-show="'🍕' === '🍕'">
    Je vais m'afficher
  </div>
  <div v-show="isOn">
    Je vais m'afficher
  </div>
  <div v-show="'🍕' === '🌭'">
    Je ne serais PAS affiché
  </div>
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      isOn: true,
    }
  });
</script>

v-if / v-else-if / v-else

Les Directives 'v-if' permettent d'afficher un élément selon les conditions.

• 'v-if' : true => L'élément sera affiché, les autres seront détruits. Si false, on passe au v-else-if ou v-else.
• 'v-else-if' (optionnel) : true => L'élément sera affiché, les autres seront détruits. Si false, on passe au v-else-if suivant ou au v-else.
• 'v-else' (optionnel) : Si aucune des conditions n’est remplie, afficher cet élément.

À la diférence de 'v-show', les éléments sont détruits du DOM si ceux-ci sont 'false'

<section id="app">
 <div v-if="!isOn">
    Is this the one ?
  </div>
  <div v-else-if="isOn && '🍕' === '🌭'">
    Or maybe this one ?..
  </div>
  <div v-else>
    Or the last one ?
  </div>
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      isOn: true,
    }
  });
</script>

v-for

La Directive 'v-for' fera l'objet d'un article plus appronfondie.

La Directive 'v-for' permet de rendre une liste d'éléments Itérables dans une data collection (Array, Object, Number, String, Iterable).

v-for="(item, index) in food" :key="index"

• 'food' resprésente la 'data collection'
• 'item' représente l'alias
• 'index' représente l'index de notre item dans notre data collection 'food'

Il est esentiel de rajouter une :key unique pour chaque itération. On peut donc dans ce cas utiliser l'index de notre alias. Nous pouvons par la suite utiliser notre alias via notre syntaxe double-moustache.

<section id="app">
  <div class="flex">
    <p class="mr-4" v-for="(item, index) in food" :key="index">
      {{ index }} => {{ item }}
      <!-- 0 => 🍕 1 => 🍔 2 => 🍟 3 => 🌭 --> 
   </p>
  </div>
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      food: ['🍕', '🍔', '🍟', '🌭']
    }
  });

</script>

v-model

La Directive 'v-model' permet de modifier une data via un input, textarea ou select.

<section id="app">
  Hi, my name is {{ name }}
  <br />
  <input v-model="name" />
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      name: "Florian"
    }
  });
</script>

v-on

La Directive 'v-on' fera l'objet d'un article plus appronfondie.

La Directive 'v-on' permet de rajouter un event listener sur un element (Lors d'un click sur un boutton par exemple).

<section id="app">  
  <button v-on:click="isOn = !isOn">
     {{ isOn ? 'On' : 'Off' }}   
  </button>
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      isOn: true,
    }
  });
</script>

Il est aussi possible de créer vos propres Directives.

Voici un résumé des Directives VueJS que nous avons abordé dans cet article, n'hésitez pas à jouer avec avec afin de maitriser les différentes Directives :

Exercice

Voici un exercice pour vous entraîner à utiliser les Directives 'v-show' (ou v-if) et 'v-on' :

Votre objectif :

• En appuyant sur le boutton, cacher le premier texte, afficher le second texte
• En rappuyant sur le boutton, cacher le deuxième texte, afficher de nouveau le premier
• etc ...

jsfiddle.net/Icesofty/vujnb1z2

---