Les bases de Vue

Réactivité

Ref

Vue utilise un système réactif pour lier les données à l'interface utilisateur. Lorsque les données changent, Vue met automatiquement à jour l'affichage.

<script lang="ts" setup>
  import {ref} from 'vue';

  const counter = ref(0);
</script>

<template>
  <div>
    <p>Compteur : {{ counter }}</p>
    <button @click="counter++">Incrémenter</button>
  </div>
</template>

<style scoped>

</style>

Remarque: En parcourant la doc ou les exemples vous pouvez voir plusieurs manière de définir votre script. Vue 3 préconise fortement le script setup. SI cela vous intéresse vous trouverez plus de détails ici. Dans notre cas nous utiliserons le script setup pour la suite de ce cours.

Remarque: On peut indiquer lang="ts" pour activer la coloration syntaxique TypeScript.

Méthodes

Les méthodes permettent d'exécuter du code en réponse à des événements ou à d'autres actions dans l'application. Les méthodes sont utiles lorsque l'on doit encapsuler une logique plus complexe qu'une simple expression inline.

<script setup>
  import {ref} from 'vue';

  const counter = ref(0);

  const reset = () => {
    counter.value = 0;
  };
</script>

<template>
  <div>
    <p>Compteur : {{ counter }}</p>
    <button @click="counter++">Incrémenter</button>
    <button @click="reset">Réinitialiser</button>
  </div>
</template>

Computed

La fonction computed permet de créer des valeurs dérivées de façon réactive, évitant ainsi des recalculs inutiles.

<script setup>
  import {computed, ref} from 'vue';

  const counter = ref(0);

  const doubleCounter = computed(() => counter.value * 2);

  const reset = () => {
    counter.value = 0;
  };
</script>

<template>
  <div>
    <p>Compteur : {{ counter }}</p>
    <p>Double compteur : {{ doubleCounter }}</p>
    <button @click="counter++">Incrémenter</button>
    <button @click="reset">Réinitialiser</button>
  </div>
</template>

Différence entre computed et methods

Quand utiliser l'un plutôt que l'autre ?

• Utilisez computed lorsque vous avez besoin d'une valeur dérivée d'une ou plusieurs données réactives.
• Utilisez methods lorsque vous souhaitez exécuter une action en réponse à un événement utilisateur ou modifier directement une donnée.

Directives de Vue.js

Vue fournit des directives pour manipuler le DOM de manière déclarative.

v-if / v-else

Affiche ou masque un élément en fonction d'une condition.

 <p v-if="connectedUser">Connected User : {{ user }}</p>

v-for

Permet de générer des listes dynamiquement.

 <ul>
  <li v-for="user in users" :key="user.name">
    {{ user.name }} - {{ user.age }} years
  </li>
</ul>

v-bind

Lie dynamiquement une valeur à un attribut HTML.

<button v-bind:disabled="counter===0" @click="reset">Réinitialiser</button>

Le raccourci de v-bind est d'utiliser simplement : suivi du nom de l'attribut :

<button :disabled="counter===0" @click="reset">Réinitialiser</button>

v-model

Lie un champ de formulaire aux données.

<input v-model="connectedUser" type="text">

Différence entre v-bind et v-model

• v-bind permet de lier une donnée à un attribut HTML de manière unidirectionnelle (de l'état vers l'élément HTML). Exemple :

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

  
  Ici, imageUrl est affiché mais ne peut pas être modifié depuis l'interface utilisateur.
• v-model, en revanche, permet une liaison bidirectionnelle (modification des données via l'interface utilisateur). Il est principalement utilisé pour les champs de formulaire :

  <input v-model="nom" placeholder="Entrez votre nom">
  

  
  L'utilisateur peut modifier la valeur de nom, qui sera automatiquement mise à jour dans le script.

Gestion des événements

Vue permet d'écouter des événements avec v-on (ou @).

<script setup>
    import { ref } from 'vue';

    const compteur = ref(0);

    const reset = () => {
        compteur.value= 0;
    };
</script>

<template>
    <button @click="reset">Cliquez-moi : {{ compteur }}</button>
</template>