Vue.js - Les bases

Anatomie d'un fichier composant .vue

Un fichier composant Vue est composé de trois parties :

• Le contenu HTML : <template>(obligatoire)

• Les données et événements écrits en JavaScript ou TypeScript : <script setup> (optionnel)

  • Avec Quasar, les conventions veulent que nous n'utilisions par les ; à la fin des expressions JavaScript.

• La mise en forme décrite en CSS, SASS ou SCSS <style> (optionnel)

L'élément <template> ne peut posséder qu'un fils direct.

C'est pourquoi on trouve régulièrement une balise <div> qui entoure tous les autres éléments HTML du template.

Pour utiliser un autre langage dans les blocks, tel que SCSS pour le style ou TypeScript pour le script, il faut utiliser les tags suivant:

<style lang="scss">
/* ... */
</style>

<script setup lang="ts">
// ...
</script>

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- {{ message }} Affiche le valeur de la référence message du composant -->
    <h5>{{ message }}</h5>
  </q-page>
</template>

<script setup>
// import de l'élément ref pour exposer des valeurs
import { ref } from 'vue'

const message = ref("J'adore Vue.js !")
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable déclarée dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Inspecter ses composants avec Vue Devtools

Vue Devtools est une extension pour navigateur qui permet d'inspecter vos applications Vue et ainsi vous aidera pour le débogage.

Vue DevToolsVue DevTools

Exemple d'utilisation de Vue Devtools pour trouver un composant et inspecter ses données (data)

Données du composant (ref)

Pour ajouter des données à un composant Vue, on utilise la méthode ref() qui enregistre une référence à la valeur indiquée.

L'exemple ci-après présente comment créer les données nom et age avec une valeur par défaut.

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

const nom = ref("Pauline")
const age = ref(8)
</script>

Data injection : injecter une donnée dans le template

Pour afficher des données dans le template, on utilise la syntaxe des moustaches doubles {{ age }}. On peut également y utiliser des expressions JavaScript {{ age + 10 }}

<template>
    <div>
        <p>Je suis {{ nom }} et dans 10 ans j'aurais {{ age + 10 }} ans</p>
    </div>
</template>

Si la valeur d'une ref est modifiée , le template HTML sera instantanément réévalué et mis à jour.

One-way data binding avec v-bind

Pour lier une ref à un paramètre d'un élément html, telle que sa classe, on peut utiliser la directive v-bind:

<p v-bind:class="laClasse" />

Il existe un raccourci à cette directive; on peut juste utiliser :

<p :class="laClasse" /> <!-- Equivalent -->

Two-way data binding (liaison bidirectionnelle) avec v-model

Avec les éléments HTML permettant une interaction utilisateur, comme les champs de formulaire, on peut utiliser la directive v-model pour le lier à une donnée du composant.

Ainsi quand l'utilisateur modifie la valeur d'un champ, la ref liée sera automatiquement mise à jour et inversement.

 <input v-model="message" />

Exemple avec champ texte lié à message

Ajout d'un <input> lié à la donnée message du composant:

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message" />
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5>{{ message }}</h5>
  </q-page>
</template>

<script setup>
// import de la méthode ref
import { ref } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Méthodes

Après les données, voyons comment ajouter des opérations à un composant.

Toutes les méthodes seront déclarées comme des fonctions dans un fichier javascript normal. Il existe deux manières de déclarer une fonction:

<script setup>
// Arrow function, méthode appréciée
const helloWorld = () => {
  alert('Bonjour le monde !')
}

// Ancienne méthode
function goodbyeWorld() {
  alert('Au revoir le monde !')
}
</script>

Événements

Pour affecter un événement à un élément HTML, on utilise la directive v-on ou le raccourci @. Un exemple avec l'événement click.

<button v-on:click="helloWorld">Bonjour</button>

<!-- avec le raccourci @ -->
<button @click="goodbyeWorld">Au revoir</button>

Si on veut annuler le comportement par défaut de l'élément, par exemple valider un formulaire, on ajoute .prevent à l'événement.

<a href="https://quasar.dev/" v-on:click.prevent="goodbyeWorld">Bonjour</a>

<!-- avec le raccourci @ -->
<a href="https://quasar.dev/" @click.prevent="helloWorld">Bonjour</a>

Exemple vider le message

Dans l'exemple ci-après, lorsqu'on modifie la valeur du champ texte

• 7 : Ajout d'un bouton HTML avec événement click qui appelle clearMessage().

• 23 - 26 : Création d'une méthode clearMessage() qui vide la donnée message.

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message" />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du composant -->
    <h5>{{ message }}</h5>
  </q-page>
</template>

<script setup>
// import de la méthode ref de Vue
import { ref } from 'vue'

// Déclaration des données
const message = ref("J'adore Vue.js !")

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Événements clavier

Concernant la gestion des événement clavier, il existe trois basiques :

• keypress : touche enfoncée. Ne déclenche qu'une fois l'événement.

• keydown : touche enfoncée. Attention, rappelle l'événement tant que la touche reste enfoncée.

• keyup : touche relâchée. Méthode la plus utilisée ❤️

Récupérer l'événement

Lorsqu'un événement appelle une méthode <input @keyup="tapTouche">, un objet représentant l'événement sera injecter comme premier paramètre de la méthode.

// Le paramètre e représente l'événement
const tapTouche = (e) => {
    console.log(e)
}

// Résultat retourné dans la console
keyup { target: input, key: "d", charCode: 0, keyCode: 68, /* ... */ }

On peut ainsi récupérer des informations précieuses sur l'événement dont notamment l'élément qui a déclenché l'événement, communément appelé la cible, target en anglais.

Dans l'exemple ci-dessus, on obtient notamment les informations suivantes

• e.target : retourne l'objet HTML qui a déclenché l'événement ici <input />

• e.key : la valeur de la touche clavier

• e.keyCode : le code de la touche clavier

On pourrait donc tester l'événement et ne réagir que si la touche "Enter" est appuyée.

// Le paramètre e représente l'événement
const tapTouche = (e) => {
    if(e.key === "Enter") {
        console.log(e)
    }
}

Modificateur de code touche

Afin de faciliter la reconnaissance d'un touche clavier, Vue.js offre des raccourcis, qui permettent de déclencher un événement uniquement si une touche est utilisée.

Dans l'exemple ci-après, la méthode tapTouche sera appelé uniquement si la touche "Enter" est relâchée.

 <input v-model="message" @keyup.enter="tapTouche" />

Exemple afficher avec Enter vider avec Escape

• 6 : Événement keyup pour la touche Enter qui appelle alertMessage()

• 7 : Événement keyup pour la touche Escape qui appelle clearMessage()

• 33 - 35 : Création de la méthode alertMessage()

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5>{{ message }}</h5>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Afficher ou cacher des éléments

Pour afficher ou cacher des éléments HTML il existe deux directives :

• v-show

• v-if / v-else

v-show - afficher / cacher

<div v-show="type === 'A'">
  A
</div>
<div v-show="type === 'B'">
  B
</div>
<div v-show="type === 'C'">
  C
</div>

v-show affiche un élément si la valeur de son expression et vraie et le cache si elle est fausse.

Pour cacher l'élément, Vue injecte la règle CSS display:none. L'élément existe mais il est caché.

v-if, v-else - rendu conditionnel

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Autre valeur que A/B/C
</div>

A la différence de v-show, les éléments ne sont pas cachés, mais supprimés.

Cette méthode est très utilisée, car elle rend le site plus performant en détruisant les composants et donc les scripts enfants.

Exemple afficher une erreur si message vide

Si message est vide, on supprime le <h5> et on affiche un <h6> avec message d'erreur à sa place.

• 12 : Ajout d'un v-if qui affichera le <h5> si la longueur du message est plus grande que 0.

• 15 : Ajout d'un <h6> avec v-else qui s'affichera si le v-if du <h5> est faux.

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Propriétés calculées

Une propriété calculée est une fonction qui retourne une valeur. Elles sont appelées dans la vue, template, sans les parenthèses, comme si c'était une ref {{ propriétéCalculée }}.

À la différence des méthodes, les propriétés calculées ne sont pas réévaluées à chaque modification d'une des données de la vue.

Elles sont mises en cache et sont réévaluées uniquement quand une de leurs dépendances (ref utilisée dans la propriété calculée) est modifiée.

Pour tester cette différence, ajouter un console.log dans une méthode et dans une propriété calculée, puis modifier une donnée de la vue qui n'est pas utilisée par ces deux dernières.

Exemple afficher le message en majuscules

• 17 : Ajout d'un <p> affichant la valeur retournée par la propriété calculée messageUppercase

• 23 : Import de la méthode computed qui permet de créer une propriété calculée

• 43 - 46 : Création de la propriété calculée messageUppercase

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, computed } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Directives personnalisées

En supplément des directives Vue (v-model et v-show), on peut enregistrer ses propres directives.

Création d'un directive bonjour, qui affiche le contenu de l'élément el.innerText dans une alert après le montage (affichage) de l'élément mounted.

const vBonjour = {
  mounted: (el) => alert(el.innerText)
}

Utilisation de la directive bonjour sur une div.

<div v-bonjour>Pauline</div>

Fonctions de "hook"

Vue.jsvuejs

Documentation officielle

Pour créer une directive, on doit choisir quand elle se déclenchera, et pour ce faire il faut au minimum choisir un élément déclencheur, appelé "hook", parmi les propositions ci-après :

• created: appelé avant l'initialisation des attributs et événement du composant.

• beforeMount: appelé juste avant l'insertion de l'élément dans le DOM.

• mounted: appelée lorsque le composant parent de l'élément lié et tous ses enfants sont montés.

• beforeUpdate: appelé avant la mise à jour du composant parent

• updated: appelé après que le composant parent et tous ses enfants ont été mis à jour

• beforeUnmount : appelé avant le démontage du composant parent

• unmounted : appelé lorsque le composant parent est démonté

Arguments des hooks d'un directive

Vue.jsvuejs

Documentation officielle

Les hooks d’une directive ont accès à ces arguments :

• el : l’élément sur lequel la directive est liée.

• binding : un objet contenant les propriétés suivantes.

  • value : la valeur passée à la directive. Par exemple dans v-my-directive="1 + 1", la valeur serait 2.

  • oldValue : la valeur précédente, seulement disponible dans update et beforeUpdate . Elle est disponible, que la valeur ait changé ou non.

  • expression : l’expression liée en tant que chaine de caractères. Par exemple dans v-my-directive="1 + 1", l’expression serait "1 + 1".

  • arg : l’argument passé à la directive, s’il y en a une. Par exemple dans v-my-directive:foo, l’argument serait "foo".

  • modifiers : un objet contenant les modificateurs, s’il y en a. Par exemple dans v-my-directive.foo.bar, l’objet des modificateurs serait { foo: true, bar: true }.

• vnode : le nœud virtuel produit par le compilateur Vue. Voir l’API VNode pour tous les détails.

• prevNode: le nœud virtuel précédent, seulement disponible dans les hooks update et beforeUpdate .

Exemple création d'une directive v-autofocus déclenché à la création

• 8 : ajout de la directive personnalisée v-autofocus à l'élément <input />

• 56 - 61 : création de la directive v-autofocus sur le hook inserted.

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
           v-autofocus
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, computed } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})

const vAutofocus = {
  mounted: (el) => {
    console.log('vauto')
    el.focus()
  }
}
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Hooks de cycle de vie (Lifecycle Hooks)

Chaque instance de Vue traverse une série d’étapes de sa création à sa destruction.

En cours de route, elle va notamment invoquer des hooks de cycle de vie, qui nous donnent l’opportunité d’exécuter une logique personnalisée à chaque niveau.

Par exemple, le hook onMounted est appelé une fois l’instance créée :

import { ref, onMounted } from 'vue'

const el = ref(1)

onMounted(() => {
  console.log(el.value) // 1
})

Il y a aussi d’autres hooks qui seront appelés à différentes étapes du cycle de vie d’une instance, par exemple onUpdated et onBeforeUnmount

Diagramme du cycle de vie

diagramme du cycle de vie d'un élément

Exemple utilisations des hooks principaux

• 29-36 : Ajout des imports

• 66 - 90 : Créations des hooks de base beforeCreate , created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
           v-autofocus
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, 
  computed, 
  onBeforeMount, 
  onMounted, 
  onActivated, 
  onBeforeUpdate, 
  onUpdated,
  onDeactivated,
  onBeforeUnmount, 
  onUnmounted  } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})

const vAutofocus = {
  mounted: (el) => {
    console.log('vauto')
    el.focus()
  }
}

onBeforeMount(() => {
  console.log("before mount")
})

onMounted(() => {
  console.log("mounted")
})

onActivated(() => {
  console.log("activated");
})

onBeforeUpdate(() => {
  console.log("before update");
})

onUpdated(() => {
  console.log("updated");
})

onDeactivated(() => {
  console.log("deactivated");
})

onBeforeUnmount(() => {
  console.log("before unmount");

})

onUnmounted(() => {
  console.log("unmounted");
})
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Les références d'éléments

Les références permettent de facilement identifier, inscrire, et récupérer un élément HTML.

ref est utilisé pour inscrire une référence à un élément HTML ou à un composant enfant. La référence sera inscrite sous l’objet $refs.

L'exemple ci-après identifie un <input /> avec la ref inputNom et le récupère avec $refs : this.$refs.inputNom

<!-- ajouter un ref -->
<input ref="inputNom"/>

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

const inputNom = ref()

onMounted(() => {
    //Récupère l'élément inputNom depuis $refs
    console.log(this.$refs.inputNom)
})
</script>

Exemple ajout d'une ref inputMessage

• 9 : Ajout de la référence inputMessage à l'<input />

• 42 : Ajout de la référence pour l'élément

• 73 - 75 : Affiche la valeur de l'<input /> après le chargement de la page mounted en utilisant onMounted

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
           v-autofocus
           ref="inputMessage"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, 
  computed, 
  onBeforeMount, 
  onMounted, 
  onActivated, 
  onBeforeUpdate, 
  onUpdated,
  onDeactivated,
  onBeforeUnmount, 
  onUnmounted  } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")
const inputMessage = ref()

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})

const vAutofocus = {
  mounted: (el) => {
    console.log('vauto')
    el.focus()
  }
}

onBeforeMount(() => {
  console.log("before mount")
})

onMounted(() => {
  console.log("mounted", inputMessage.value.value)
})

onActivated(() => {
  console.log("activated");
})

onBeforeUpdate(() => {
  console.log("before update");
})

onUpdated(() => {
  console.log("updated");
})

onDeactivated(() => {
  console.log("deactivated");
})

onBeforeUnmount(() => {
  console.log("before unmount");
})

onUnmounted(() => {
  console.log("unmounted");
})
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}
</style>

Liaisons de classes et de styles CSS

Un besoin classique de la liaison de données est la manipulation de la liste des classes CSS d’un élément, ainsi que ses styles CSS en ligne.

Puisque ce sont tous deux des attributs, il est possible d’utiliser v-bind pour les gérer.

Liaisons de classes CSS

<!-- ajoute la classe nomClasseCSS si la condition conditionJS est vraie -->
<p v-bind:class="conditionJS ? 'nomClasseCSS' : ''">...</p>
<!-- ou raccourci -->
<p :class="conditionJS ? 'nomClasseCSS' : ''">...</p>

Vous pouvez permuter plusieurs classes en ayant plus de champs dans l’objet. De plus, la directive v-bind:class peut aussi coexister avec l’attribut class. Donc, avec le template suivant :

<div
  class="static"
  v-bind:class="(isActive ? 'active' : '') +
                (hasError ? 'text-danger' : '')"
></div>

Et les données suivantes :

const isActive = ref(true)
const hasError = ref(false)

Le rendu sera :

<div class="static active"></div>

Exemple avec la classe CSS error

• 10 : Ajout de la classe CSS error à l'<input> si la taille de message est plus grande que cinq.

• 110 - 113 : Création de la classe CSS error qui ajoute un fond rose et un couleur de texte rouge.

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
           v-autofocus
           ref="inputMessage"
           :class="message.length > 5 ? 'error' : ''"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, 
  computed, 
  onBeforeMount, 
  onMounted, 
  onActivated, 
  onBeforeUpdate, 
  onUpdated,
  onDeactivated,
  onBeforeUnmount, 
  onUnmounted  } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")
const inputMessage = ref()

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})

const vAutofocus = {
  mounted: (el) => {
    console.log('vauto')
    el.focus()
  }
}

onBeforeMount(() => {
  console.log("before mount")
})

onMounted(() => {
  console.log("mounted", inputMessage.value.value)
})

onActivated(() => {
  console.log("activated");
})

onBeforeUpdate(() => {
  console.log("before update");
})

onUpdated(() => {
  console.log("updated");
})

onDeactivated(() => {
  console.log("deactivated");
})

onBeforeUnmount(() => {
  console.log("before unmount");
})

onUnmounted(() => {
  console.log("unmounted");
})
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}

.error {
  color: red;
  background-color: pink;
}
</style>

Liaison de styles HTML

La syntaxe objet pour v-bind:style est assez simple - cela ressemble presque à du CSS, sauf que c’est un objet JavaScript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS :

<template>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>

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

const activeColor = ref('red')
const fontSize = ref(30)
</script>

C’est souvent une bonne idée de lier directement un objet de style, pour que le template soit plus propre :

<template>
    <div :style="styleObject"></div>
</template>

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

const styleObject = ref({
    color: 'red',
    fontSize: '13px'
})
</script>

Encore une fois, la syntaxe objet est souvent utilisée en conjonction avec des propriétés calculées retournant des objets.

Styles CSS conditionnel avec une propriété calculée

Si on veut ajouter le du style CSS sous certaines conditions, on peut utiliser une propriété calculée.

<template>
  <p :style="petitPara">{{ contenu }}</p>
</template>

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

const contenu = ref("Je suis un très grand texte !")

const petitPara = computed(() => {
  if( message.value.length > 5 ) {
    return { 
      'font-size': '10px'
    }
  }
})
</script>

Exemple injection de style avec la propriété calculée error

• 16 : Injection du style CSS retourné par la propriété calculée error

• 63 - 71 : Déclaration de la propriété calculée error

<template>
  <!-- q-page : composant page de Quasar avec marge intérieure -->
  <q-page padding>
    <!-- Two-way data binding avec v-model, lie l'input avec la donnée message -->
    <input v-model="message"
           @keyup.enter="alertMessage"
           @keyup.esc="clearMessage"
           v-autofocus
           ref="inputMessage"
           :class="message.length > 5 ? 'error' : ''"
    />
    
    <!-- Bouton qui au click appelle la méthode clearMessage() -->
    <button @click="clearMessage">Vider</button>
    
    <!-- {{ message }} Affiche le valeur de la donnée message du cmposant -->
    <h5 v-if="message.length"
        :style="error">
      {{ message }}
    </h5>
    
    <h6 v-else>Pas de message ...</h6>

    <p>Majuscules : {{ messageUppercase }}</p>
  </q-page>
</template>

<script setup>
// import de la méthode ref de vue
import { ref, 
  computed, 
  onBeforeMount, 
  onMounted, 
  onActivated, 
  onBeforeUpdate, 
  onUpdated,
  onDeactivated,
  onBeforeUnmount, 
  onUnmounted  } from 'vue'

// déclaration de la référence
const message = ref("J'adore Vue.js !")
const inputMessage = ref()

// Déclaration des méthodes

// Déclaration de la méthode clearMessage()
const clearMessage = () => {
  // Dans les méthodes, pour accéder à la valeur des refs, il faut utiliser .value
  message.value = ''
}

const alertMessage = (e) => {
  alert(message.value)
}

// Déclaration de la propriété calculée
const messageUppercase = computed(() => {
  console.log('messageUppercase')
  return message.value.toUpperCase()
})

const error = computed(() => {
  if (this.message.length > 5) {
    return {
      color: 'red',
      'background-color': 'pink'
    }
  }
  return null
})

const vAutofocus = {
  mounted: (el) => {
    console.log('vauto')
    el.focus()
  }
}

onBeforeMount(() => {
  console.log("before mount")
})

onMounted(() => {
  console.log("mounted", inputMessage.value.value)
})

onActivated(() => {
  console.log("activated");
})

onBeforeUpdate(() => {
  console.log("before update");
})

onUpdated(() => {
  console.log("updated");
})

onDeactivated(() => {
  console.log("deactivated");
})

onBeforeUnmount(() => {
  console.log("before unmount");
})

onUnmounted(() => {
  console.log("unmounted");
})
</script>

<!-- Utilise le langage SCSS https://sass-lang.com/guide -->
<style lang="scss">
h5 {
  /* $primary est une variable décalrer dans src/css/quasar.variables.sass */
  background-color: $primary;
  color: white;
}

.error {
  color: red;
  background-color: pink;
}
</style>