Rendu déclaratif Vue3

Le rendu déclaratif consiste à piloter les mises à jour de la vue par les données, plutôt que de manipuler directement le DOM.

Le rendu déclaratif permet aux développeurs de se concentrer davantage sur la logique métier sans avoir à se soucier de la manière de mettre à jour la vue et le DOM.

Le rendu déclaratif de Vue 3 est une approche de rendu basée sur des templates qui permet aux développeurs de décrire la structure de la page et les relations de liaison de données au moyen d'une syntaxe de template concise, sans avoir à manipuler directement le DOM.

Le rendu déclaratif de Vue 3 simplifie le processus de mise à jour de l'interface utilisateur en utilisant des templates, des directives (telles que v-if, v-for, v-bind, etc.) et des données réactives.

Le rendu déclaratif de Vue fait qu'il vous suffit de déclarer comment l'interface utilisateur doit être présentée ; Vue mettra automatiquement à jour la vue en fonction des changements de données. Lorsque vous modifiez les données, la vue réagit automatiquement.

Vue 3 utilise une syntaxe de template (similaire à HTML) pour décrire l'interface utilisateur, et les expressions dans le template (telles que {{ message }}) sont liées au modèle de données du composant.

1. Liaison de données

La liaison de données est le cœur du rendu déclaratif.

En liant les données, Vue peut automatiquement mettre à jour le contenu des éléments DOM, évitant ainsi la manipulation manuelle traditionnelle du DOM.

Expression d'interpolation

L'expression d'interpolation utilise des doubles accolades{{ }}pour insérer les données du composant dans le template HTML.

Exemple

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

Dans l'exemple ci-dessus, les doubles accolades{{ message }}seront rendues sous la formeHello, Vue 3!, et lorsque la valeur de message change, la vue se met automatiquement à jour.

Le contenu à l'intérieur des doubles accolades n'est pas limité aux identificateurs ou aux chemins—nous pouvons utiliser n'importe quelle expression JavaScript valide.

<h1>{{ message.split('').reverse().join('') }}</h1>

Liaison d'attributs

Grâce à la directivev-bind, vous pouvez lier les attributs HTML aux données du composant, ce qui permet de mettre à jour dynamiquement les attributs des éléments DOM (tels que href, class, src) en fonction de l'état du composant.

Exemple

<template>
  <div>
    <a v-bind:href="url">Cliquez ici</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};
</script>

Dans l'exemple ci-dessus, v-bind:href lie les données url à l'attribut href de la balise <a>. Lorsque url change, href est automatiquement mis à jour.

Rendu conditionnel

Vue implémente le rendu conditionnel via les directives v-if, v-else-if et v-else, en décidant s'il faut rendre un élément DOM en fonction d'une certaine condition de données.

Exemple

<template>
  <div>
    <p v-if="isVisible">Ce texte est visible</p>
    <button @click="toggleVisibility">Basculer la visibilité</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dans l'exemple ci-dessus, lorsque isVisible est true, la balise <p> est rendue. Lorsque le bouton est cliqué, isVisible bascule, et l'affichage de la balise <p> change également automatiquement.

Rendu des listes

Utilisez la directive v-for pour afficher une liste.

Vue rend l'élément DOM correspondant pour chaque élément du tableau, et met automatiquement à jour la vue lorsque les données du tableau changent.

Exemple

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue 3' },
        { id: 2, name: 'JavaScript' },
        { id: 3, name: 'HTML' }
      ]
    };
  }
};
</script>

Dans l'exemple ci-dessus, v-for affiche une liste basée sur le tableau items. Chaque élément de liste possède une clé pour aider Vue à suivre chaque élément, ce qui améliore l'efficacité du rendu.

Liaison de données bidirectionnelle

Vue fournit la directive v-model pour implémenter une liaison bidirectionnelle entre les éléments de formulaire (tels que <input>) et les données du composant. De cette façon, la valeur de l'élément de formulaire reste synchronisée avec le modèle de données. Lorsque l'utilisateur saisit des données, celles-ci sont automatiquement mises à jour, et lorsque les données changent, la vue est automatiquement mise à jour.

Exemple

<template>
  <div>
    <input v-model="message" placeholder=Saisissez du texte />
    <p>Vous avez saisi : {{ message }}</p>
  </div>
</template>

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

Dans l'exemple ci-dessus, v-model maintient la valeur de l'élément input synchronisée avec les données message. Lorsque l'utilisateur saisit du texte dans le champ de saisie, message est automatiquement mis à jour, et le contenu de la balise <p> change également automatiquement.

Gestion des événements

Vue fournit la directive v-on pour écouter les événements DOM et exécuter des méthodes lorsque les événements sont déclenchés. Cette approche vous permet de gérer de manière déclarative des événements tels que la saisie utilisateur et les clics.

Exemple

<template>
  <div>
    <button v-on:click="increment">Cliquez-moi</button>
    <p>Nombre de clics : {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

Dans l'exemple ci-dessus, v-on:click écoute l'événement click du bouton et appelle la méthode increment à chaque clic pour augmenter la valeur de count. count est automatiquement mis à jour dans la vue.

Propriétés calculées

Les propriétés calculées sont un moyen proposé par Vue pour calculer des valeurs de manière déclarative.

Les propriétés calculées sont basées sur des données réactives et ne sont recalculées que lorsque les données dont elles dépendent changent.

Exemple

<template>
  <div>
    <p>Montant d'origine : {{ amount }}</p>
    <p>Montant après taxe : {{ computedAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 100
    };
  },
  computed: {
    computedAmount() {
return this.amount * 1.1; // Supposons que le taux de taxe soit de 10%
    }
  }
};
</script>

computedAmount est une propriété calculée qui calcule le montant après taxe en fonction de amount. Lorsque amount change, computedAmount se met à jour automatiquement sans qu'il soit nécessaire de déclencher manuellement une mise à jour de la vue.

Autres extensions