Les bases des directives Vue.js

Les directives Vue.js sont des jetons spéciaux dans le balisage qui indiquent à la bibliothèque d'effectuer une action sur un élément DOM. Elles sont préfixées par un v- pour indiquer qu'il s'agit d'attributs spéciaux fournis par Vue. Les directives sont l'une des fonctionnalités principales de Vue.js, permettant aux développeurs de manipuler le DOM efficacement.

Dans cet article, nous explorerons les bases des directives Vue.js, couvrant les directives les plus couramment utilisées et comment les utiliser dans vos applications Vue.

Directives fréquemment utilisées dans Vue.js

Voici quelques-unes des directives les plus couramment utilisées dans Vue.js:

v-bind: Lie dynamiquement un ou plusieurs attributs ou un accessoire de composant à une expression.
v-model: Crée une liaison de données bidirectionnelle sur les éléments de saisie de formulaire, de zone de texte et de sélection.
v-if: Rend conditionnellement un élément ou un composant.
v-else: Fournit un bloc else pour v-if.
v-else-if: Fournit un bloc else-if pour v-if.
v-for: Affiche une liste d'éléments à l'aide d'un tableau ou d'un objet.
v-on: Attache des écouteurs d'événements aux éléments.
v-show: Bascule la visibilité d'un élément en fonction d'une expression.
v-html: Met à jour le code HTML interne d'un élément.

v-bind: lier des attributs de manière dynamique

La directive v-bind permet de lier dynamiquement des attributs ou des propriétés à une expression. Par exemple, vous pouvez lier l'attribut src d'un élément img à une propriété de données:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

Le raccourci pour v-bind est simplement un deux-points (:), donc l'exemple ci-dessus peut être réécrit comme suit:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: liaison de données bidirectionnelle

La directive v-model est utilisée pour créer une liaison de données bidirectionnelle sur les éléments d'entrée du formulaire. Elle maintient l'élément d'entrée et la propriété de données synchronisés:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if et v-else: rendu conditionnel

Les directives v-if, v-else-if et v-else sont utilisées pour le rendu conditionnel des éléments. Elles vous permettent de restituer des éléments de manière conditionnelle en fonction de l'évaluation d'une expression:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: Rendu de liste

La directive v-for permet de restituer une liste d'éléments en parcourant un tableau ou un objet. Chaque élément du tableau peut être restitué à l'aide d'une boucle:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Gestion des événements

La directive v-on permet d'attacher des écouteurs d'événements aux éléments DOM. Vous pouvez gérer les interactions des utilisateurs telles que les clics, les saisies, etc.:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

L'abréviation de v-on est le symbole @ (@), donc l'exemple ci-dessus peut être réécrit comme suit:

<button @click="showAlert">Click Me</button>

v-show: Activer/désactiver la visibilité

La directive v-show permet de modifier la visibilité d'un élément en fonction d'une expression. Contrairement à v-if, elle ne supprime pas l'élément du DOM; elle modifie uniquement la propriété CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: rendu HTML

La directive v-html est utilisée pour mettre à jour le code HTML interne d'un élément. Elle est utile lorsque vous devez restituer du code HTML brut dans vos composants Vue:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Conclusion

Les directives Vue.js fournissent des moyens puissants pour manipuler le DOM et créer des applications Web dynamiques et interactives. Comprendre les bases des directives Vue.js telles que v-bind, v-model, v-if, v-for, v-on, v-show et v-html est essentiel pour tout développeur Vue. En maîtrisant ces directives, vous pouvez créer des applications plus robustes et riches en fonctionnalités avec Vue.js.

vue directives v-bind v-model v-if v-for v-on v-show v-html réactivité données événement conditionnel rendu