Introduction à Vue.js (v3) PDF

Introduction à Vue.js (v3) Philippe Genoud [email protected] Dernière mise à jour : 07/02/2024 12:41 Qu'est-ce que Vue.js ? https://vuejs.org/ Vue.js : un framework JavaScr...

Introduction à Vue.js (v3) Philippe Genoud [email protected] Dernière mise à jour : 07/02/2024 12:41 Qu'est-ce que Vue.js ? https://vuejs.org/ Vue.js : un framework JavaScript open-source et progressif pour faciliter la construction d'interfaces utilisateur (UI) web. Développé initialement par Evan You (2014) Vue3 dernière version (3.0 sept. 2020 , 3.2.47 fév. 2023) https://github.com/vuejs/core/blob/main/CHANGELOG.md Deux principales caractéristiques Rendu déclaratif : Vue étend le HTML standard avec une syntaxe de modèle (templates) qui nous permet de décrire de manière déclarative la sortie HTML en fonction de l'état JavaScript. Réactivité : Vue suit automatiquement les changements d'état de JavaScript et met efficacement à jour le DOM lorsque des changements se produisent. Conçu comme un framework flexible, léger et extensible il permet de couvrir une large gamme d'applications Souvent comparé aux autres frameworks front-end les plus populaires que sont React.js Svelte Angular (projet open source (Google) (Meta) initié par Rich Harris) (ex Facebook) https://vuejs.org/guide/extras/ways-of-using-vue.html Philippe Genoud - UGA © - Février 2023 2 Tutorial d'introduction à Vue3 Tutorial inspiré de "Vue.js 3 Fundamentals with the Options API" de vueschool.io https://vueschool.io/courses/vuejs-3-fundamentals Syntaxe de template Liaison bidirectionnelle des données de formulaires Gestion des événements utilisateur Méthodes Rendu conditionnel Liaison d'attributs HTML Attention : dans le guide Vue3 activer la préférence Options API https://vuejs.org/guide/introduction.html Philippe Genoud - UGA © - Février 2023 3 Hello Vue ! Utilisation de Vue dans un simple fichier HTML First Vue App {{ … }} doubles moustaches Récupère la valeur de la propriété message de l’objet données de l’instance de Vue Directive v-model qui permet de lier la valeur de l’input à la propriété message de l’objet données de l’instance de Vue {{message}} Importe Vue3 depuis son CDN Vue.createApp({... }) création d’un objet Vue, avec en paramètre un const helloMessage = Vue.createApp({ objet définissant les options de configuration data() { return { message: "Hello Vue 3 !!!" Fonction data qui retourne un objet avec une propriété message. } L’objet retourné par data() définit les données utilisées par l’instance de Vue } }).mount("#hello-message"); Associe l’objet Vue au div d’identifiant hello-message Philippe Genoud - UGA © - Février 2023 4 Vue Devtools Vue Devtools extension du browser pour Firefox, Chrome et Edge qui permet d’interagir et de déboguer une application Vue Indispensable au développement avec Vue https://devtools.vuejs.org/ Pour installer cliquer ici ! Ici ! là ! Oui, ce gros bouton vert Philippe Genoud - UGA © - Février 2023 5  Vue Devtools sur Chrome Attention si vous passez par le web store de Chrome…. choisissez la bonne version (6.5.0 au 22/02/2023) Visiter le site du webstore de chrome 1 (https://chrome.google.com/webstore) Chercher Vue 2 Devtools Version béta (pour la tester la v 6.x, mais n’est plus active ) Ajouter l’extension 4 Sélectionner Version actuelle 6.x 3 (supporte Vue3 et Vue 2) Version legacy 5.x pour les versions antérieures de Vue (Vue2) 5 Philippe Genoud - UGA © - Février 2023 6 Vue Devtools sur Chrome Pour activer l'extension Vue Devtools sur les URLs de fichiers si l'icone de l'extension n'apparait Si la page contient une Vue Vue.js l'extension est activée pas dans la barre d'outils, l'épingler à celle-ci en cliquant sur l'icone l'extension Vue Devtools est grisée lorsque n'est pas activée faire un clic droit sur l'icone de Vue Devtools dans la barre d'outils et sélectionner Gérer l'extension si la page a été ouverte en ouvrant directement le fichier HTML sans passer par un serveur par défaut l'extension n'est pas activée autoriser l'accès aux URL de fichiers Philippe Genoud - UGA © - Février 2023 7 Vue Devtools sur Chrome Sélectionner l'onglet Vue version de Vue.js possibilité de les modifier directement Instance de l'application et les données associées au des éventuels composants composant sélectionné Vue Devtools injecte directement les instances de Vue dans la console pour que l'on puisse les manipuler directement sans avoir à déclarer explicitement une variable $vm0 désigne la première instance (ici il n'y en a qu'une) de Vue Philippe Genoud - UGA © - Février 2023 8  Syntaxe de templates Vue {{... }} doubles moustaches pour lier des {{message}} données au DOM const helloMessage = Vue.createApp({ data() { return { message: "Hello Vue 3 !!!" } } }).mount("#hello-message"); Possibilité d’utiliser n’importe quelle expression JavaScript {{message.toLocaleUpperCase()}} Mais, uniquement une et un seule expression est acceptée {{console.log(message); message.toLocaleUpperCase()}} instruction if n'est {{ if (! message) { return "Welcome !" }}} pas une expression {{ message?message:"Welcome !"}} expression ternaire {{ message || "Welcome !"}} expression booléenne Philippe Genoud - UGA © - Février 2023 9 Exemple : gérer une liste de courses Pour aller plus loin avec la découverte de Vue on va développer une application de gestion d'une liste de courses Syntaxe de template Liaison bidirectionnelle des données de formulaires Gestion des événements utilisateur Méthodes Rendu conditionnel Liaison d'attributs HTML Philippe Genoud - UGA © - Février 2023 10 Syntaxe de templates Vue Liste de courses affichée sous la forme d’une liste HTML ( )... {{header}} Céréales Chocolat Pommes const shoppingListApp = Vue.createApp({ data() { return { header: "Ma liste de courses" } ul { } list-style: none; }) padding: 0;.mount("#shopping-list"); } Philippe Genoud - UGA © - Février 2023 11 Syntaxe de templates Vue Directive v-for : pour itérer et afficher le contenu de tableaux ou d’objets... Liste de courses affichée {{header}} sous la forme d’une liste Céréales HTML ( ) Chocolat Pommes const shoppingListApp = Vue.createApp({ data() { return { header: "Ma liste de courses" } } plutôt que de coder en dur la liste de }) courses dans le code HTML, l'idée est de la.mount("#shopping-list"); définir comme une propriété (data property) de l'objet Vue par exemple sous la forme d'un tableau Philippe Genoud - UGA © - Février 2023 12 Vue templating syntax Directive v-for : pour itérer et afficher le contenu de tableaux ou d’objets... Pour chaque élément (item) du tableau items on {{header}} crée un élément li qui affiche sa valeur {{item}} const shoppingListApp = Vue.createApp({ Liste de courses affichée data() { return { sous la forme d’une liste header: "Ma liste de courses", HTML ( ) items: [ "Céréales", "Chocolat", "Pommes", ] la liste est un attribut de l’objet instance de } } Vue (items tableau de string) }).mount("#shopping-list"); Philippe Genoud - UGA © - Février 2023 13 Vue templating syntax Directive v-for : pour itérer et afficher le contenu de tableaux ou d’objets... Pour chaque élément (item) du tableau items on {{header}} crée un élément li qui affiche sa valeur {{item.label}} const shoppingListApp = Vue.createApp({ Liste de courses affichée data() { Attribut :key avec return { un identifiant sous la forme d’une liste header: "Ma liste de courses", unique pour chaque HTML ( ) items: [ "Céréales", {id : 1, label : "Céréales"}, élément permet "Chocolat", {id : 2, label : "Chocolat"}, d’optimiser le rendu "Pommes", {id : 3, label: "Pommes"}, ] itératif d’une liste } Tips and Gotchas for Using key with v-for in Vue.js 3 } }) Pour afficher devant chaque item son id.mount("#shopping-list"); {{item.id}} {{item.label}} Possibilité d'utiliser la déstructuration ou décomposition d'objets pour simplifier l' écriture {{id}} {{label}} déstructure un objet item en deux variables, évite ensuite d'utiliser la notation pointée Philippe Genoud - UGA © - Février 2023 14 (JavaScript : affectation par décomposition … Object et Array deux des structures de données les plus utilisées en JavaScript affectation par décomposition permet de déstructurer des tableaux ou objets dans un ensemble de variables par exemple pour passer des données à une fonction, on n'a pas besoin d'un tableau ou d'un objet mais d'un ensemble de valeurs (éventuellement ne correspondant qu'à une partie de l'objet ou du tableau) exemples déstructuration de tableaux : let tab = ["Joe", "Moose", 30, "Canada", "CA"]; let prenom = tab; let nom = tab; } let [prenom, nom] = tab; instruction de décomposition si le tableau est plus long que la liste à gauche, les éléments supplémentaires sont ignorés function afficher(prenom, nom) { console.log(`prénom : ${prenom}`); console.log(`nom : ${nom}`); } afficher([firstname, lastname] = tab); instruction de décomposition utilisée directement en lieu et place d'une liste d'arguments let [prenom, , age] = tab; possibilité d'ignorer des éléments du tableau à l'aide de virgules supplémentaires possibilité de récupérer la fin du tableau (le tableau des éléments restants) en utilisant let [prenom, nom, ,...pays] = tab; un paramètre supplémentaire précédé de... pays → "Canada" pays → "CA" let [prenom, nom, age] = ["Joe", "Moose"]; si le tableau est plus court que la liste de valeurs à gauche, les valeurs manquantes sont undefined age → undefined let [prenom, nom, age = 30] = ["Joe", "Moose"]; possibilité de définir des valeurs par défaut age → 30 les valeurs par défaut peuvent être des expressions ou même des appels de fonction Philippe Genoud - UGA © - Février 2023 15 JavaScript : affectation par décomposition … liste de variables objet décomposition d'objets : diviser un objet en variables let {var1, var2} = {var1:..., var2:...} let joe = { prenom : "Joe", nom : "Moose", age: 30, pays: "Canada", codePays :"CA" }; let nom = joe.nom; let prenom = joe.prenom; let pays = joe.pays; } let { nom, prenom , pays } = joe; toutes les propriétés de l'objet en partie droite ne sont pas nécessairement en partie gauche l'ordre des propriétés n'a pas d'importance let {prenom: firstname, nom: lastname} = joe; possibilité d'affecter la valeur d'une propriété à une variable ayant un autre nom let marie = {prenom : "Marie", nom: "Dupont", age: 27 }; possibilité de définir des valeurs par défaut pour les propriété potentiellement manquantes let {nom, prenom, pays = "France", codePays = "FR"} = marie; les valeurs par défaut peuvent être des expressions ou même des appels de fonction si il y a moins de variables que de propriétés dans l'objet, possibilité de récupérer les propriétés let {nom, prenom, age,...infosPays} = joe; restantes dans un objet infosPays → { pays: "Canada", codePays : "CA" } let nom,prenom; { nom , prenom } = joe; { nom , prenom } = joe; erreur syntaxique { … } est interprété comme un bloc de code ~ SyntaxError: Unexpected token '=' ({ nom , prenom } = joe) ; dans ce cas il faut envelopper l'expression entre parenthèses ( … ) Philippe Genoud - UGA © - Février 2023 16 JavaScript : affectation par décomposition) let grenoble = { let { Si un objet ou un tableau contient d’autres nom : "Grenoble", nom, objets et tableaux imbriqués possibilité de codePostal : "38000", codePostal, coordonnees: { déstructurer les données imbriquées coordonnees : { lat, lat : 45.1885, long lon : 5.7245 }, }, temperatures: [ tmin, tmax], temperatures: [5, 12.5] pays = "France" }; } = grenoble; let { seules les variables définies au niveau le plus nom, codePostal, coordonnees: { lat, lon }, temperatures: [tmin, tmax], pays = "France" profond sont créées } = grenoble; décomposition très utile pour des fonctions ayant plusieurs paramètres dont la plupart son facultatifs (exemple constructeur de Vue) function showMenu(title = "Untitled", width = 200, height = 100, items = []) { Difficulté à se rappeler de l'ordre des paramètres //... } Nécessité de passer valeur undefined lorsque l'on veut utiliser les valeurs par défaut showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]); Les paramètres sont passés sous forme d'objets et la function showMenu({ title = "Untitled", width = 200, height = 100, items = [] })= {{} ) { fonction les décompose en variables //... } Pas de problèmes d'ordre des paramètres Pas de problèmes de valeurs par défaut, dans options let options = { on ne met que les paramètres nécessaires title: "My menu", items: ["Item1", "Item2"], Permet d'appeler la fonction sans paramètre si on }; veut utiliser toutes les options par défaut exemple d'après showMenu(options); https://javascript.info/destructuring-assignment showMenu(); Philippe Genoud - UGA © - Février 2023 17 Vue templating syntax Directive v-for : réagit aux modifications de l’objet lié... Liste de courses affichée sous la forme d’une liste HTML () est réactive au modifications du tableau {{header}} items. Vue.js prend en charge la {{item.label}} gestion du DOM. Pas besoin d'écrire de code JavaScript pour insérer ou supprimer const shoppingListApp = Vue.createApp({ des éléments HTML data() { return { header: "Ma liste de courses", items: [ "Céréales", {id : 1, label : "Céréales"}, "Chocolat", {id : 2, label : "Chocolat"}, "Pommes", {id : 3, label: "Pommes"}, ] } } }).mount("#shopping-list"); Rajoute un item au tableau items Philippe Genoud - UGA © - Février 2023 18  Vue : saisie de valeurs à l’aide d’inputs {{header}} Priorité Elevée {{item.label}} const shoppingListApp = Vue.createApp({ data() { return { header: "Ma liste de courses", newItem: "" , highPriority: false , items: [ {id : 1, label : "Céreales"}, {id : 2, label : "Chocolat"}, {id : 3, label: "Pommes"}, } ] la directive v-model permet de faire un binding } bidirectionnel entre les inputs et les données du modèle }).mount("#shopping-list"); Lorsque l’input change le modèle est mis à jour Lorsque le modèle change, l’input est mis à jour Philippe Genoud - UGA © - Février 2023 19 Vue : saisie de valeurs à l’aide d’inputs on peut associer aux directives v-model des modifieurs permettant d'altérer leur comportement par défaut syntaxe : v-model.modifier exemple Par défaut la propriété newItem est mise a jour à chaque Avec le modifieur lazy la propriété newITem n'est mise à jour événement keyup (à chaque caractère saisi) qu'après un événement blur (lorsque le champ de saisie perd le focus) autres modifieurs :.trim,.number Philippe Genoud - UGA © - Février 2023 20 Vue : saisie de valeurs à l’aide d’inputs v-model ne s'applique pas uniquement aux inputs de type texte, mais à toutes sortes d'input HTML5 : textareas, selects, checkboxes, radios boutons, …. https://vuejs.org/guide/essentials/forms.html Attention : dans le guide Vue3 activer la préférence Options API Philippe Genoud - UGA © - Février 2023 21 Vue : saisie de valeurs à l’aide d’inputs Ajout d'une propriété permettant de donner une priorité au nouvel item newItemPriority: "low", avec des Radios Boutons Low High avec un liste de sélection Low High Philippe Genoud - UGA © - Février 2023 22 Vue : saisie de valeurs à l’aide d’inputs Ajout d'une propriété permettant de donner une priorité au nouvel item newItemPriority: "low", avec des Radios Boutons Low High avec un liste de sélection Low High Philippe Genoud - UGA © - Février 2023 23  Vue : saisie de valeurs à l’aide d’inputs définition de la priorité comme étant un booléen newItemHighPriority: false, utilisation d'une case à cocher (check box) pour définir son niveau Priorité : case non cochée : valeur par défaut false case cochée : valeur true Philippe Genoud - UGA © - Février 2023 24 Vue : saisie de valeurs à l’aide d’inputs cases à cocher pas limitées à une valeur booléenne, possibilité de l'associer à des choix multiples plusieurs checkboxes liées a une propriété du modèle cette propriété contiendra la liste (tableau) des valeurs des checkboxes sélectionnées exemple Rouge Vert Bleu le tableau et les checkboxes sont synchronisés Vue.createApp({ data() { return {... checkedColors: [ ],... } }... }).mount(...) Philippe Genoud - UGA © - Février 2023 25  gérer les évènements utilisateur Vue exploite la puissance des événements JavaScript au travers d'une syntaxe déclarative simple qui permet de réagir facilement aux interactions des utilisateurs la directive v-on permet d'associer un gestionnaire d'événement à un élément HTML v-on:type-event="code javascript à exécuter" exemple : bouton pour ajouter le nouvel item à la liste des courses Priorité : Ajouter le gestionnaire d'événement associé à un click sur le bouton doit ajouter un nouvel item à la liste Directive v-on pour gérer les événements utilisateur items.push({id : items.length + 1, label : newItem}) v-on:click="items.push({id:items.length + 1, label: newItem})" L’évènement Le code JavaScript à exécuter Philippe Genoud - UGA © - Février 2023 26  Vue : gérer les évènements utilisateur Comme pour les directives v-model , possibilité d’ajouter des ‘modifiers’ à la directive v-on pour altérer le comportement des gestionnaires d’évènements en utilisant un syntaxe déclarative forme générale v-on:evenement.modifieur évènement : l'utilisateur modifieur : gestionnaire d’évènement n’est exécuté que quand exemple : relâche une touche l’utilisateur relâche la touche Entrée Possibilité d’ajouter le nouvel item à v-on:keyup.enter="items.push({id:items.length + 1, label: newItem})" la liste items en tapant simplement Entrée dans le champ de saisie {{header}} Priorité Elevée Ajouter {{item.label}} Philippe Genoud - UGA © - Février 2023 27 Vue : gérer les évènements utilisateur @ raccourci pour la directive v-on: @evenement.modifieur  v-on:evenement.modifieur exemple {{header}} Priorité Elevée Ajouter {{item.label}} Philippe Genoud - UGA © - Février 2023 28 Vue : Méthodes Pas toujours efficace d’exécuter directement du code JavaScript dans un attribut de directive Lisibilité, lorsque le code a exécuter est plus complexe qu’une simple instruction Éventuelle duplication de code ➔Extraction de la logique dans des fonctions, plus précisément des méthodes, associées à l’instance de Vue Vue.createApp( { data() { return { header: "Ma liste de courses", objet options... de la Vue } }, Ajout d’un attribut methods: { methods à l’objet options définissant methode1() { la Vue... }, il faut passer par la référence this pour accéder aux method2(param) { données de l’objet Vue Méthode... this.header } On ne peut pas utiliser de fonction fléchée car this ne... serait pas utilisable method3: (param) => { }... } } ).mount("..."); Philippe Genoud - UGA © - Février 2023 29 Vue : Méthodes Méthode addItem pour rajouter newItem au tableau items (Vue)... Ajouter Vue.createApp( { data() { return { objet options header: "Ma liste de courses", de la Vue... } }, methods: { Modèle pour effacer addItem() { (Vue) this.items.push({id: this.items.length + 1, label: this.newItem}); l'input avec this.newItem = ""; l'intitulé de } l'item } } ).mount("#shopping-list"); Philippe Genoud - UGA © - Février 2023 30 Rendu Conditionnel : v-if et v-else Parfois il est nécessaire de n'afficher du code HTML que quand certaines conditions sont remplies → directives v-if et v-else Directive v-if="condition" si condition est vraie l'élément auquel s'applique la directive est visible, sinon il n'apparait pas (plus précisément, il est retiré du DOM) Directive v-else ne peut s'appliquer qu'à un élément suivant un élément avec une directive v-if, l'élément s'affiche si la directive v-if associée est fausse, et inversement ne s'affiche pas si elle est vraie exemples afficher un message si la liste est vide Super ! Tu as fait tous tes achats ! Philippe Genoud - UGA © - Février 2023 31 Rendu Conditionnel : v-if et v-else exemples afficher ou masquer le formulaire de saisie d'un nouvel item Rendu conditionnel des bouton : - le bouton Masquer est affiché si l'édition est possible, Pour Masquer - sinon c'est le bouton Ajouter un Item qui est afficher {{header}} Masquer formulaire Un clic sur les boutons bascule l'état de la propriété editing Ajouter un item du modèle Pour afficher Vue.createApp({ data() { return {..., ajout d'une propriété indiquant si le editing: false, formulaire d'édition doit apparaitre }; ou non }, methods: { addItem() {... }, doEdit(editing) { ajout d'une méthode permettant de this.editing = editing; this.newItem ="" modifier la propriété editing } }, }).mount("#shopping-list"); Philippe Genoud - UGA © - Février 2023 32 Liaison (binding) d’attributs HTML directive v-bind: permet de lier n'importe quel attribut HTML aux données du modèle syntaxe générale v-bind:nom-attribut="expression JavaScript" exemples : tout seul peut être utilisé comme raccourci à v-bind: :nom-attribut="expression JavaScript" Dynamic link La valeur du lien hypertexte est liée à la valeur de la propriété newITem du modèle Ajouter Le bouton est désactivé si le champ de saisie est vide Philippe Genoud - UGA © - Février 2023 33 Liaison d'attributs (binding) de styles CSS Quand on utilise une liaison d’attributs HTML (directive v-bind: ou :) les attributs de classe de style sont un cas particulier car on peut passer en plus des données permettant de contrôler quand certaines classes s’appliquent ou non. :class="{ nom-classe : expression [ , nom-classe : expression ] }" la classe de style est appliquée sur l'expression JS est vraie exemple : barrer dans la liste de courses les items qui ont été achetés et surligner ceux qui sont prioritaires. Dans le modèle (JS) items: [ { id: 1, label: "Céréales", highPriority: true, purchased:true }, { id: 2, label: "Chocolat", highPriority: true, purchased:false }, { id: 3, label: "Pommes", highPriority: false, purchased:true }, { id: 4, label: "Carottes", highPriority: false, purchased:false }, ], Dans la Vue (template HTML) {{ item.label }} Philippe Genoud - UGA © - Février 2023 34 Liaison d'attributs (binding) de styles CSS Pour les classes de style statiques (qui s'appliquent de manière inconditionnelle) il suffit de les déclarer à l'aide d'un attribut class sans liaison (binding) exemple : tous les items de la liste des courses sont en gras italique Dans le modèle (JS) items: [ { id: 1, label: "Céréales", highPriority: true, purchased:true }, { id: 2, label: "Chocolat", highPriority: true, purchased:false }, { id: 3, label: "Pommes", highPriority: false, purchased:true }, { id: 4, label: "Carottes", highPriority: false, purchased:false }, ], Dans la Vue (template HTML) {{ class="shopping-item" item.label }} >{{ item.label }} Philippe Genoud - UGA © - Février 2023 35 Liaison d'attributs (binding) de styles CSS Une autre syntaxe existe pour définir les style permettant de combiner styles liés et styles statiques :class="[ element-de-style [ , element-de-style] ]" où element-de style peut être 'nom-classe' pour appliquer statiquement style nom-classe { nom-classe : expression } pour appliquer style nom-classe si expression est vraie expression1 ? expression2 : expression3 pour appliquer les styles définis par expression2 si expression1 est vraie et les styles définis par expression2 sinon exemple :class="[ 'maclasse1', applique statiquement la classe maclasse1 { maclasse2: cond1 }, applique maclasse2 si cond1 est vraie { maclasse3: cond2 }, applique maclass3 si cond2 est vraie cond3 ? 'maclasse4 maclasse5' : 'maclasse6' applique maclass4 et maclasse5 si cond3 est vraie ]" ou maclasse6 si cond3 est fausse Philippe Genoud - UGA © - Février 2023 36 Liaison d'attributs (binding) de styles CSS dans l'exemple avec la liste de courses Dans le modèle (JS) items: [ { id: 1, label: "Céréales", highPriority: true, purchased:true }, { id: 2, label: "Chocolat", highPriority: true, purchased:false }, { id: 3, label: "Pommes", highPriority: false, purchased:true }, { id: 4, label: "Carottes", highPriority: false, purchased:false }, ], Dans la Vue (template HTML) {{ item.label }} class="shopping-item" >{{ item.label }} :class="[ {strikeout: item.purchased}, {priority: item.highPriority}, 'shopping-item' ]" Philippe Genoud - UGA © - Février 2023 37 Propriétés calculées fonctionnalité de Vue qui permet de transformer ou d'effectuer des calculs sur les données du modèle, puis de réutiliser facilement le résultat en tant que variable à jour dans notre modèle. très utiles pour remplacer les expressions complexes dans les templates la longueur du texte tapé Vue.createApp({ data() { return { header: "Ma liste de courses",... }; }, methods: {... }, computed: { }) méthodes qui {{characterCount}}/200.mount("#shopping-list"); peuvent le faire... Philippe Genoud - UGA © - Février 2023 38