R3.01 - dev. web - côté client (vuejs)

   TD n°1 : principes de vuejs et fichiers .vue

Imprimer
Détails
Catégorie : R3.01 - dev. Web côté client (vuejs)
Affichages : 6128
Préambule
 

 

1°/ Principes de vuejs

 

2°/ Description d'un fichier .vue

2.1°/ Structuration générale

<template>
    <!-- visuel du composant, en HTML + directive vuejs -->
</template>

<script>
    // modèle des données et du contrôle du composant, écrit en JS
</script>

<style>
    // définition des styles CSS
</style>

 

 

 2.2°/ partie <script>

 

<script>
// importation de modules/fonctions/objets/...
export default {
  name: 'MyComponent', // le nom du composant
  components: { // liste des composants importés },
  data: () => {
    return {
      // déclaration des variables locales du composant
    }
  },
  props: {
    // definition des variables données par le composant parent
  },
  computed: {
    // définition des fonctions associées aux variables calculées
  },
  watch: {
    // définition des fonctions appelées automatiquement lors de changement de valeur de variables locales/props
  },
  methods: {
    //définition des fonctions "normales"
  },
  created() {
    // instructions appelées lors de l'instanciation du composant
  },
  mounted() {
    // instruction appelées lorsque le composant est intégré dans le DOM
  },
  updated() {
    // instructions appelées lorsque le composant est actualisé dans le DOM
  }
}
</script>

 

2.2.1°/ data

VERY BIG WARNING ! L'observation par vuejs a quelques limites sur les objets et les tableaux :

  • si on ajoute des attributs à un objet après la création du composant qui définit cet objet, ces nouveaux attributs ne seront pas observés.
  • si on change directement la valeur d'un élément d'un tableau grâce à la notation [] (par ex, mytab[2] = 5), vuejs ne détectera pas le changement. C'est pourquoi il faut TOUJOURS utiliser :
    • push() pour ajouter des éléments à un tableau,
    • splice() pour supprimer/remplacer des éléments
  • NB : ce dernier point vaut également pour un tableau qui serait à l'intérieur d'un objet.

 

2.2.2°/ props

 ATTENTION : on ne doit JAMAIS modifier directement la valeur d'une props, par exemple dans une fonction de watch ou methods.

 

2.2.3°/ computed

ATTENTION : on ne doit JAMAIS modifier directement la valeur d'une variable calculée, par exemple dans une fonction de watch ou methods.

 

 

2.2.4°/ watch

 

2.2.5°/ methods

 

2.2.6°/ created(), mounted(), updated()

 

2.2.7°/ manipulation 

 

3°/ Exemple illustratif (avec spoiler sur les directives vuejs)

 

ATTENTION ! Cet exemple permet juste d'illustrer les différents points abordés précédemment, dans un but pédagogique. En pratique, on n'écrirait pas un tel composant de cette façon, mais plus simplement (par ex, pas besoin de watcher, ni de mounted() ).

 Télécharger les sources : [ vuejs-td1-src.tgz ]

NB : cette archive contient uniquement le répertoire src. Il faut donc au préalable créer un projet basique avec vue-cli puis remplacer le répertoire src par celui contenu dans l'archive.

Dans model.js, on a :

var gamers = [ {name: 'jean', pseudo: 'jj'}, {name: 'pierre', pseudo: 'pepe'} ]
export {gamers}

 Dans MyComponent.vue, on a :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Il y a actuellement {{ nbGamers }} joueurs </p>
    <select v-model="idSelected">
      <option v-for="(gamer,index) in gamers" :key="index" :value="index">{{gamer.name}}</option>
    </select>
    <p v-if="currentGamer">pseudo joueur sélectionné : {{ currentGamer.pseudo }} </p>
  </div>
</template>

<script>
import {gamers} from './model'
export default {
  name: 'MyComponent',
  props: {
    title: String
  },
  data: () => {
    return {
      gamers, // variable externe
      currentGamer : null, // variable interne
      idSelected: -1 // variable interne
    }
  },
  computed: {
    nbGamers() { return gamers.length } // si gamers change de taille, nbGamers sera automatiquement recaculé
  },
  methods: {
    setCurrentGamer(idx) { 
      if( (idx >= 0) && (idx < this.nbGamers) ) { // on accède à la variable locale calculée nbGamers
        this.currentGamer = this.gamers[idx] 
      }
    }
  },
  watch: {
    idSelected( newVal) {
      console.log("nouvelle sélection : "+newVal);
      this.setCurrentGamer(newVal);
    }
  },
  mounted() {
    this.currentGamer = null
    this.idSelected = -1
  }
}
</script>

 

Principes de fonctionnement : 
  • les items de la liste déroulante sont créés dynamiquement en fonction des objets se trouvant dans le tableau importé et observé nommé gamers.
  • grâce à la directive v-for, on peut parcourir les élément de ce tableau, en les comptant, pour créer des balises "en boucle".
  • dans le cas présent, le texte de chaque item est tiré de l'attribut name et la valeur correspondant à l'item sélectionné est l'indice dans le tableau.
  • grâce à la directive v-model, on indique à vuejs que la sélection de l'utilisateur doit mettre à jour la variable idSelected, qui prendra donc comme valeur un indice dans le tableau gamers.
  • grâce à un watcher, on observe tout changement de la valeur de idSelected. Si c'est le cas, on appelle une méthode qui met à jour un objet nommé currentGamer, représentant le joueur sélectionné.
  • on remarque également l'utilisation d'une variable calculée nbGamers pour contenir le nombre d'éléments dans gamers. Si gamers change, alors nbGamers sera réévaluée.
  • mounted() est utilisée pour initialiser les 2 variables locales lors de l'intégration du composant dans le DOM. (NB : c'est normalement inutile puisque l'on a donné la même valeur dans data).
  • enfin, on remarque l'utilisation d'une directive v-if, qui permet d'inclure de manière conditionnelle le paragraphe <p>