Théorie - Semaine 11 - Les directives Vue

Rappel

Nous connaissons déjà quelques directives que nous avons utilisées dans les semaines précédentes :

• v-for : permet de faire du rendu conditionnel en fonction d'une condition donnée. Cela va exécuter le bloc de code pour chaque élément d'une liste donnée.

<div v-for="item in items" :key="item.id">
  {{ item.nom }}
</div>

Qu'est ce que :key="item.id" dans v-for?

Dans Vue.js, lorsque vous utilisez la directive v-for pour rendre une liste d'éléments, il est recommandé de fournir une clé unique pour chaque élément de la liste. Cela se fait en utilisant l'attribut :key.

• v-if et v-else : permet de faire du rendu conditionnel en fonction d'une condition donnée.

<div v-if="estVisible">
    Ce contenu est visible si isVisible est vrai.
</div>
<div v-else>
    Ce contenu est visible si isVisible est faux.
</div>

Quelques autres directives utiles

• v-show : permet de faire du rendu conditionnel en fonction d'une condition donnée. Contrairement à v-if, v-show ne supprime pas l'élément du DOM, mais le masque simplement en utilisant la propriété CSS display: none.

<div v-show="estVisible">
    Ce contenu est visible si isVisible est vrai.
</div>

Trucs et astuces :

• Utilisez v-if lorsque vous souhaitez conditionnellement rendre ou supprimer un élément du DOM en fonction d'une condition. Cela peut être plus performant si l'élément est rarement affiché.
• Utilisez v-show lorsque vous souhaitez simplement masquer ou afficher un élément sans le supprimer du DOM. Cela peut être plus performant si l'élément est fréquemment affiché ou masqué.
• Il n'existe pas de v-show-else.

La performance est importante en production! Il faut garder cela en tête!

• v-text : permet de lier du texte à un élément HTML. C'est une alternative à l'utilisation de la syntaxe de moustache pour afficher du texte.

<div v-text="message"></div>

Puisque ce qui se trouve à l'intérieur est du TypeScript, on peut injecter des expressions plus complexes que juste une variable. Par exemple, on peut faire :

<div v-text="objet.message"></div>

Attention ⚠

Cela remplace n'importe quel contenu qui pourrait y avoir à l'intérieur de l'élément HTML. Par exemple, si vous avez :

<div v-text="message">Contenu initial</div>

Le contenu "Contenu initial" sera remplacé par la valeur de message. Donc, si message est égal à "Bonjour", le rendu final sera :

<div>Bonjour</div>

Si on veut garder le contenu initial et ajouter du texte à la suite, on peut faire :

<div>{{ message }} Contenu initial</div>

• v-on (raccourci @) : permet d'attacher des événements à un élément HTML. Par exemple, pour attacher un événement de clic à un bouton, vous pouvez faire :

<button v-on:click="gererClick">Cliquez-moi</button>

Ou en utilisant le raccourci @ :

<button @click="gererClick">Cliquez-moi</button>

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, la méthode gererClick sera appelée. Vous pouvez également passer des arguments à la méthode en utilisant la syntaxe suivante :

<button @click="gererClick('argument')">Cliquez-moi</button>

• v-bind (raccourci :) : permet de lier des attributs HTML à des données ou des expressions dans votre composant Vue. Par exemple, pour lier la classe d'un élément à une variable, vous pouvez faire :

<div v-bind:class="classeDynamique">Contenu</div>

Ou en utilisant le raccourci : :

<div :class="classeDynamique">Contenu</div>

Dans cet exemple, la classe de l'élément <div> sera déterminée par la valeur de classeDynamique. Vous pouvez également lier d'autres attributs HTML, comme src pour les images, href pour les liens, etc. Par exemple :

<img :src="urlImage" alt="Image dynamique">

• v-model : permet de faire une liaison bidirectionnelle entre une variable TyepScript et un élément HTML. C'est l'une des directives les plus utiles!

Elle sera détaillée dans la section "Affichage des données et gestion des évènements" de la prochaine théorie.