UM6P-CS

COLLEGE OF COMPUTING

Specialized Platform Development 1

Pr. Ahmed BENTAJER
[email protected]

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 1

PARTIE I
VUE.JS
Introduction
 Introduction
§Vue Framework JS
§Propose des manières pour déclarer les composants pour la construction des UI
§Permet d'intégrer du contenu généré dynamiquement dans le code HTML d'une page Web
§Conçu dès l'origine pour pouvoir être adopté progressivement, notamment sans avoir à mettre en
place d'infrastructure de dépendances.
§Les pages web .vue

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 4

 Introduction

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 5

 Introduction : Framework évolutif
Vue couvre la plupart des fonctionnalités courantes nécessaires au développement front-end.

Conçu pour être flexible et adoptable de manière incrémentale.

En fonction du cas d'utilisation, Vue peut être utilisé de différentes manières :

•Extension du HTML statique sans étape de construction

•Intégration de Web Components (éléments personnalisés) sur n'importe quelle page

•Application mono-page (SPA)

•Fullstack / Rendu côté serveur (SSR)

•JAMStack / Génération de sites statiques (SSG)

•Adapté pour l'ordinateur de bureau, le mobile, pour le WebGL et même le terminal.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 6

 Introduction : Composant monofichier

Un composant monofichier (Single-file Component : SFC)

Encapsule la logique (JavaScript), le modèle (HTML) et les styles (CSS) du composant dans un seul
fichier

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 7

 Introduction : Style d’API

Les composant Vue peuvent être créées avec deux styles d’API

Options API

Composition API

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 8

 Introduction : Style d’API : Options API

La logique du composant est définie en utilisant

un objet options : (data, méthodes, hooks,
computed ....)

Les propriétés, définies par l’options, sont

exposées sur this dans les fonctions.

this pointe sur l’instance du composant

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 9

Les bases
 Bases : Utilisation de Vue

§Différentes manières d’utiliser Vue :

§ CDN

§ NPM

§ VUE-CLI

§ Téléchargement des fichiers JS et les héberger

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 11

 Bases : Utilisation de vue : CDN
JS file

Html file

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 12

 Bases : Utilisation de vue : CDN

§Le script pour l’importation de Vue depuis un CDN permet :

§ Créer une variable globale Vue

§ Expose toutes les méthodes et fonctions

§Dans le fichier HTML on définit un div avec un id pour définir ou notre application sera montée et ce que
vue pourra contrôler

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 13

 Bases : Utilisation de vue : Strokes
§data est une fonction qui renvoie un objet dont les champs deviendraient des variables réactives.

§methods est un objet qui contient les fonctions. Ces fonctions ont accès aux variables réactives des données en utilisant le format
this.variableName.

§component est un objet où chaque champ fournit un nom pour le modèle et la valeur pointe vers le constructeur d'un autre composant
(enfant de celui actuel).

§Computed est un objet dont les attributs définissent des propriétés « calculées ». Chaque membre est alors une fonction ou un objet
qui peut être utilisé comme variables réactives dans notre modèle et notre code. Les fonctions seront en lecture seule et les objets
pourraient inclure une logique pour y lire et y écrire des valeurs.

§props et emit déclarent des paramètres pour recevoir des données du composant parent et déclarer des événements qui sont distribués
au composant parent. Cela fournit un moyen formel de communiquer et transmettre des données entre les composants associés

§Les méthodes de hooks de cycle de vie sont une série de fonctions qui sont déclenchées pendant le cycle de vie du composant.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 14

 Bases : Exemple
En se basant sur les données dans le fichier 1-book.json

1. Créez un projet HTML

2. Ajouter le tag script pour importer vue depuis un CDN

3. Dans le fichier HTML ajouter une div qui sera contrôler par Vue

4. Créez un fichier JS et y mettre le code pour créer une instance Vue et monter le avec la div créée

5. Créez la fonction data, y ajoutez les données du fichier 1-book.json

6. Afficher les valeurs dans le fichier HTML

7. Inspecter le code de la page et discuter le.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 15

 Bases : Directives

§Vue fournit des attributs HTML spéciaux appelés directives.

§Une directive est déclarée dans la balise d'ouverture d'un élément HTML et affectera ou
fournira un comportement ou une fonctionnalité dynamique à cet élément.

§Nous pouvons également créer nos propres directives dans Vue

§Ont une notation spéciale commençant par v-.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 16

 Bases : Directives

§v-bind

§v-show

§v-if, v-else, v-if-else

§v-for et :key

§v-model

§v-on

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 17

 Bases : Directives : v-bind

§Lie la valeur d'un attribut HTML à la valeur d'une variable JavaScript.

§Si la variable est réactive, chaque fois qu'elle met à jour sa valeur, elle sera reflétée dans le
html.

§Si la variable n'est pas réactive, il ne sera utilisé qu'une seule fois lors du rendu initial du
HTML.

§ v-bind est abrégée :

§Exemple :
§ <img :src="link_to_profile_picture">

§ <img v-bind:src="link_to_profile_picture">

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 18

 Bases : Directives : v-bind : Exemple

En se basant sur l’exercice précédent :

Créez un nouveau dossier dans votre projet qui va contenir des images

Ajoutez une propriété image ayant comme valeur le lien vers une image

Utilisez la directive v-bind pour afficher l’image du book

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 19

 Bases : Directives : v-show

Cette directive affiche ou masque un élément, sans le supprimer du document.

Équivaut à modifier l’attribut CSS display.

Elle prend comme variable qui donne une valeur booléenne (qui peut être interprété comme
vrai ou non vide).

Par exemple, la variable de chargement a une valeur booléenne :

<div v-show="loading">…</div>

Le div apparaîtra lorsque la variable loading a la valeur vraie.

Il est important de garder à l'esprit que v-show utilise le style de l'objet pour l'afficher
et que l'élément fera toujours partie du DOM

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 20

 Bases : Directives : v-show : Exemple

En se basant toujours sur l’exemple des books

Ajouter une propriété showBook et lui affecter la valeur true

Lors de l’affichage, afficher le book dans une div ayant comme attribut v-show

Inspecter le code source de la page et décrire le comportement de v-show

Changer la valeur de showBook à false

Inspecter encore une fois le code source de la page et décrire le comportement de v-show

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 21

 Bases : Directives : v-if, v-else, v-else-if

Directives conditionnelles en JavaScript;

v-if est utilisée pour restituer conditionnellement un bloc. Le bloc ne sera rendu que si
l'expression de la directive renvoie une valeur véridique

Similaires à v-show dans le sens où elle affichera ou masquera l'élément, mais à la

différence que v-if supprime complètement l'élément du DOM.
◦ cela peut être coûteux en termes de calcul s'il est utilisé de manière inappropriée à grande échelle
avec des éléments qui changent souvent d'état, car le framework doit effectuer plus d'opérations
pour manipuler le DOM, par opposition à v-show, lorsque seul le style d'affichage a besoin.
changer.

La directive v-else peut être utilisée pour indiquer un "bloc else" pour v-if

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 22

 Bases : Directives : v-if, v-else, v-else-if : Exemple

Reprenez l’exemple de v-show cette fois avec v-if

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 23

 Bases : Directives : v-for et :key

La directive v-for peut être utilisée pour afficher une liste d'éléments basée sur un tableau.
Nécessite une syntaxe spéciale sous la forme d'élément dans éléments,
◦ où éléments est le tableau de données source

◦ et élément est un alias pour l'élément du tableau sur lequel l'itération est effectuée

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 24

 Bases : Directives : v-for et :key

v-for supporte également un second et optionnel alias pour l'index de l'item actuel :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 25

 Bases : Directives : v-for et :key

v-for supporte également un second et optionnel alias pour l'index de l'item actuel :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 26

 Bases : Directives : v-for et :key

v-for peut être utilisée aussi pour itérer sur les propriétés d'un objet.

L'ordre d'itération sera basé sur le résultat de l'appel à Object.keys() sur l'objet

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 27

 Bases : Directives : v-for et :key

En se basant sur les données du fichier 2-books.json, afficher les informations de chaque
book sous la forme :

Index – key - Value

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 28

 Bases : Directives : v-for avec v-if

Il n'est pas recommandé d'utiliser v-if et v-for sur le même élément

v-if a la priorité sur le v-for

◦ v-if n’aura pas accès aux vars de la portée du v-for

En se basant sur les données du fichiers 2-books.json, afficher juste les books qui sont favoris

◦ Utilisez dans un 1er temps v-for et v-if dans le même élément li

◦ Proposer une alternative

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 29

 Bases : Directives : v-for et :key

:key fournit une clef unique pour chaque itération

Utilisée par v-for pour identifier les éléments du tableau et les mettre à jour correctement
lorsque le tableau et modifié

Si :key n’est pas utilisée v-for utilisera l’index de l’élément comme clef
◦ Peut entraîner des problèmes de màj et vue ne pourra pas faire une distinction entre les éléments du tableau si
un élément est modifié

key attend des valeurs de type chaînes de caractères ou des nombres.

N'utilisez pas d'objets comme clé de v-for

:key est un attribut spécial qui est lié avec v-bind. Il ne doit pas être confondu avec la
variable de clé de propriété utilisée dans le cas d'un v-for avec un objet.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 30

 Bases : Directives : v-for et :key : Exemple

En se basant sur le fichier 2-books.json.

Afficher une liste HTML contenant les différents books ainsi que les différentes
informations.

Pour isFav, si elle est true afficher Favoris, Rien si non

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 32

Les valeurs calculées
 CP : Introduction

§CP est une nouvelle fonctionnalité introduite dans Vue3

§Chaque membre est une fonction ou un objet qui peut être utilisé comme variables
réactives dans le modèle du code.

§Les fonctions seront en lecture seule et les objets pourront inclure une logique pour y lire
et y écrire des valeurs.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 34

 CP : Introduction

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 35

 CP : Avantages

§Possibilité d’utiliser la même logique dans une fonction

§Les propriétés calculées sont mises en cache en fonction de leurs dépendances

réactives. Une propriété calculée ne sera réévaluée que lorsque l'une de ses dépendances
réactives aura changé.

§Tant que book.isFav n'a pas changé, les accès multiples vont immédiatement retourner le
résultat calculé précédent sans avoir à réexécuter la fonction accesseur

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 36

 CP : Bonnes pratiques

§La valeur retournée par une propriété calculée est un état dérivé.

§Similaire à un snapshot temporaire - chaque fois que l'état de base change, un nouveau
snapshot est créé.

§Il n'est pas logique de modifier un snapshot, donc une valeur calculée retournée ne
devrait être traitée qu'en lecture seule et ne pas être modifiée - à la place, modifiez
l'état de base dont elle dépend afin d'engendrer de nouveaux calculs.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 37

Class dynamique
 Class Dynamique: Introduction

§Permet de donner une class de manière conditionnelle, en se basant sur une certaine
condition.

§Exemple pour chaque livre, nous pourrions lui attribuer conditionnellement une classe
basée sur sur la valeur d’une propriété dans chaque livre (isFav).

§Ceci va permettre d’appliquer un style différent pour les books qui sont favoris

§Utilisation de v-bind

§Dans l’attribut on va passer un objet contenant des clefs/valeurs

§Pour chaque clef/valeur, la clef sera évaluée si elle retourne vraie, le style va s’appliquer

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 39

 Class Dynamique: Introduction

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 40

 Class Dynamique: Exemple

§En se basant sur les données du fichier 2-books.json

§Afficher la liste des books dans des listes li

§Pour les images alt doit avoir le title du book

§Ajouter une class pour les livres favoris et y appliquer le style du fichier dynamic-class.css

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 41

 Class Dynamique: Plusieurs classes

§Possibilité d’avoir plusieurs class en ayant plus de clefs dans l’objet

§La directive v-bind:class (ou :class) peut co-exister avec l’attribut simple class

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 42

 Class Dynamique: Tableau de classes

§Un tableau de class peut être utilisé pour appliquer plusieurs styles

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 43

 Class Dynamique: Tableau de classes
§Possibilité de rendre conditionnellement la liste des class

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 44

 Class Dynamique: Tableau de classes
§Il est également possible d’utiliser des objets dans le tableau des class au cas où plusieurs class doivent être
rendues conditionnellement

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 45

Event Handling
 Event Handling : Introduction

§Les événements sont des actions ou des occurrences qui se produisent dans le système que
vous programmez et dont le système vous informe

§Dans le Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et

tendent à être rattachés à un élément spécifique qui s'y trouve :

§Différents types d'événements qui peuvent se produire, par exemple :

• Clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
• L'appuie sur une touche du clavier.
• Redimensionner ou fermer la fenêtre du navigateur.
• Une page web finissant de se charger.
• Un formulaire en cours de soumission
• Une erreur qui survient.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 47

 Event Handling : Introduction

En JavaScript, un évènement est une action qui se produit et qui possède deux
caractéristiques essentielles :
• C’est une action qu’on peut « écouter », c’est-à-dire une action qu’on peut détecter car le système
va nous informer qu’elle se produit ;

• C’est une action à laquelle on peut « répondre », c’est-à-dire qu’on va pouvoir attacher un code à
cette action qui va s’exécuter dès qu’elle va se produire.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 48

 Event Handling : Introduction

§La gestion des events dans Vue est similaire que dans JS

§Utilisation de la directive v-on (raccourcis @)

§Elle n’attend pas une variable, mais une fonction ou une expression, et lie un événement
HTML à une fonction JavaScript pour l'exécuter.

§L'événement doit être déclaré immédiatement après les deux points. Par exemple, pour
réagir à un événement de clic sur un bouton :
§ <button v-on:click="printPage()">Print</button>

§ <button @click="printPage()">Print</button>

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 49

 Event Handling : handler

§Le handler est la fonction qui va être appelée pour gérer l’event

§Elle peut prendre plusieurs formes :

§ Inline;

§ Méthode;

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 50

 Event Handling : handler

§Le handler Inline : Du JavaScript inline qui sera exécuté lorsque l'événement sera
déclenché, il est généralement utilisé dans les cas simples

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 51

 Event Handling : handler
§Le handler Méthode : Utilisée quand la logique est plus complexe, ici v-on accepte le
nom ou chemin d’une méthode

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 52

 Event Handling : handler
§Une méthode gestionnaire reçoit automatiquement l'objet événement natif du DOM qui la
déclenche

§Au cas où la méthode reçoit d’autre params, l’accès à l’argument du gestionnaire doit se
faire explicitement, en dernier argument, en passant l’objet $event

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 53

 Event Handling : handler : Exemple
§En se basant sur l’exemple précédent et le fichier 1-index.html

§Ajouter une propriété globale showBook et lui affecter la valeur true par défaut.

§Ajouter un bouton permettant d’afficher ou de cacher les différents books

§Ajouter un event au li de chaque book, si l’utilisateur clic sur le book ajouter le au favoris
(isFav doit avoir la valeur true)

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 54

 Event Handling : Modificateur d’event
§Les modificateurs d'événement sont utilisés pour modifier le comportement, par défaut,
des événements liés aux composants

§Sont ajoutés à la fin de la propriété d'événement

§ Peuvent aussi être appelé au sein des méthodes handler

§Vue fournit des modificateurs d’event pour v-on :

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 55

 Event Handling : Modificateur de touche
Peuvent être utilisée pour écouter les event du clavier

Vue fournit des modificateurs de touches pour v-on

§ @keyup.enter=’’ handler’’

Vue fournit des alias pour les touches les plus couramment utilisées :
• .enter
• .tab
• .delete (capture à la fois les touches "Delete" et "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 56

 Event Handling : touche mod. de système
Sont utilisées pour déclencher des écouteurs d'événements de la souris ou du clavier
seulement lorsque la touche modificatrice correspondante est pressée :
◦ .ctrl

◦ .alt

◦ .shift

◦ .meta (Sur les claviers Mac, meta est la touche commande (⌘). Sur les claviers Windows, meta est
la touche Windows (⊞))

Exemple :

<!-- Alt + Entrée -->

<input @keyup.alt.enter="clear" />

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 57

 Event Handling : touche mod. de système

Sont utilisées pour déclencher des écouteurs d'événements de la souris ou du clavier

seulement lorsque la touche modificatrice correspondante est pressée :

Les touches modificatrices sont différentes des touches normales

Lorsqu'elles sont utilisées avec des événements keyup, elles doivent être appuyées lorsque
l'événement est émis.

Exemple : keyup.ctrl ne se déclenchera que si vous relâchez une touche tout en maintenant
la touche ctrl enfoncée. Il ne se déclenchera pas si vous relâchez la touche ctrl seulement.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 58

 Event Handling : modificateur .exact

Permet de contrôler la combinaison exacte de touches de modificateurs systèmes requis pour

déclencher l’event :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 59

Formulaire
 Formulaire : Introduction
§Lors du travail avec les formulaires, on souvent besoin de gérer les données saisies par
l’utilisateur

§Vue propose la directive v-model

§Elle permet le two-way-binding (contrairement à v-bind)

§Lorsqu’elle est attachée à un élément d'entrée du formulaire, elle attribue la valeur

renvoyée par l'élément HTML à la variable référencée, conservant ainsi le DOM et l’état
JavaScript en synchronisation

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 61

 Formulaire : Introduction : Exemple
§Créer une page avec un champ input de type texte

§Lier une propriété du model avec l’input avec le v-model

§Faire la même chose avec v-bind

§Discutez le résultat

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 62

 Formulaire : Introduction
§v-model ignore automatiquement les attributs de valeur par défaut des éléments HTML du
formulaire (value, checked ou selected)

§Les valeurs prises en comptes sont celle déclarée dans l’option data côté Javascript

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 63

 Formulaire : v-model : input et textarea

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 64

 Formulaire : v-model : checkbox
§valeur booléenne

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 65

 Formulaire : v-model : checkbox
§Plusieurs valeurs

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 66

 Formulaire : v-model : select
§Un seul valeur

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 67

 Formulaire : v-model : select
§Plusieurs valeurs

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 68

 Formulaire : v-model : select
§Rendu des valeurs de l’option avec v-for

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 69

 Formulaire : v-model
§On peut lier les valeurs de l’attributs value des tags à une propriété du model

§Utilisation de v-bind

§Checkbox, radio, select

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 70

 Formulaire : v-model

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 71

 Formulaire : v-model : Modificateurs
§.lazy : permet d’enclencher la sync après l’event change au lieu de chaque event input

§.trim : Permet de supprimer les espaces blancs saisis par l’utilisateur

§Exemple : v-model.lazy / v-model.trim

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 72

 Formulaire : Exercice
§En se basant sur le fichier formulaire-exo-p73.vue

§Et soit le formulaire ayant les champs suivants :

§ Champs pour la saisie de l’email et mot de passe

§ Champ de type option pour choisir le profil de l’utilisateur

§ Des champs radio permettant à l’utilisateur de choisir permis les skills proposés

§ Un champ de type input pour que l’utilisateur ajoute d’autres skills s’ils ne sont pas proposés

§Le champs input permettra à l’utilisateur de saisir le skill et sera validé par un appuie sur
la touche espace, une fois fais, le skill devra être ajouté au tableau des skills (attention au
doublons)

§Pour la liste des skills, ajouter un click event, permettant de supprimer un skill de la liste

§Une fois le formulaire soumis, afficher les informations saisies par l’utilisateur

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 73

Lifecycle hooks
 Hooks : Introduction

§Chaque instance Vue passe par une série

d’étapes d’initialisation quant-elle créée :
§ Elle est créée, elle est montée sur le DOM.

§ Elle est mise à jour, peut-être avec des données

différentes à un moment donné.

§ Détruite

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 75

 Hooks : beforeCreate

§Le premier auquel nous avons accès est le hook

beforeCreate

§Se déclenche est avant le composant est même

entièrement créé.

§Dans ce hook, nous ne pouvons pas encore accéder aux

données ni aux éléments du modèle.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 76

 Hooks : Created

§Quand le composant a été créé mais pas encore monté sur

le DOM, on a accès au hook created

§On peut désormais accéder, seulement, aux données.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 77

 Hooks : beforeMount

§Et après cela, la compilation de notre modèle commence

ici.

§À ce moment on a accès au beforeMounted hook,

§Lorsque ce hook est appelé, le composant a fini de

configurer son état réactif, mais aucun noeud du DOM n'a
encore été créé. Il est sur le point d'exécuter son effet de
rendu du DOM pour la première fois.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 78

 Hooks : mounted

§Appelé quand le composant ait été monté

§C'est désormais un le moment pour effectuer des requêtes

de récupération si vous avez besoin de données pour votre
composant

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 79

 Hooks : beforeUpdate

§Désormais, une fois le composant monté, les données

peuvent changer au fil du temps ou en réaction à des
événements tels que le clic sur des boutons.

§Lorsque ces données sont mises à jour et modifiées, nous

déclenchons le hook beforeUpdate.

§Cela se produit après la modification des données mais

avant que les mises à jour ne soient restituées dans le
DOM.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 80

 Hooks : updated

§L’exécution du hook updated se fait à chaque fois que les

données concernant le composant sont modifiées et que le
DOM déclenche un re-render.

§Ne modifiez pas l'état du composant dans le

hook updated - cela conduirait à une boucle de mises à
jour infinie !

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 81

 Hooks : beforeUnmout

§Appelé juste avant que l'instance d'un composant ne soit

démontée.

§Lors de son appel, l’instance du composant est toujours

fonctionnelle

§Peut être utilisée pour réinitialiser des variables, nettoyer

des event, ….

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 82

 Hooks : unmouted

§Appelé après que le composant ait été démonté.

§Lors de son appel, l’instance du composant est toujours

fonctionnelle

§Peut être utilisée pour réinitialiser des variables, nettoyer

des event, ….
Un composant est considéré comme démonté après que :
• Tous ses composants enfants ont été démontés.
• Tous ses effets réactifs associés (effet de rendu et propriétés
calculées / observateurs créés pendant setup()) ont été arrêtés.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 83

Vue CLI
 Vue CLI : Introduction

§Utilisé pour les projets importants

§CLI : Command Line Interface

§Prérequis :
§ Node.js installed (utilisation du npm)

§ Install vue-cli à npm install –g @vue/cli

§ Create Vue project à vue create project-name

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 85

Template Ref
 Ref template: Introduction
§L'attribut ref est utilisé pour marquer les éléments du DOM dans <template>, afin qu'ils soient
accessibles à partir de l'objet $refs dans <script>.

§ref et l'objet $refs sont utilisés dans Vue comme alternative aux méthodes JavaScript simple comme
getElementById() ou querySelector()
§ Changement de class
§ Lire la valeur
§ ….

§Si les éléments HTML créés avec v-for ont l'attribut ref, les éléments DOM résultants seront ajoutés
à l'objet $refs sous forme de tableau

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 87

 Ref template: exemple
§$refs permet d’accéder aux différents ref

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 88

 Ref template: Opérations possibles
§Accès aux éléments
§ $refs.element : accède à l’élément DOM brut
§ $refs.element.value : accède à la valeur de l’élément

§Manipulation des éléments

• $refs.style.propriété = valeur : Définir un style CSS pour l'élément.
• $refs.classList.add(classe) : Ajouter une classe CSS à l'élément.
• $refs.classList.remove(classe) : Supprimer une classe CSS de l'élément.
• $refs.focus() : Donner le focus à l'élément.
• $refs.blur() : Retirer le focus de l'élément.

§Écouter les éléments DOM

• $refs.addEventListener('événement', fonction) : Écouter un événement sur l'élément.
• $refs.removeEventListener('événement', fonction) : Supprimer l'écoute d'un événement sur l'élément.

§Utilisation des fonctions utilitaires

§ $refs.getBoundingClientRect() : Obtenir les dimensions et la position de l'élément dans le DOM.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 89

 Ref template: recommandations
§Cependant, il est recommandé d'utiliser les références avec précaution et de privilégier
l'utilisation des données réactives de Vue autant que possible, en particulier si vous vous
trouvez à manipuler fréquemment le DOM, car cela peut entraîner des problèmes de
performances et de maintenabilité dans votre application.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 90

Composants
 Composant: Introduction
§Les composants permettent de fractionner l'UI en morceaux indépendants et réutilisables.

App Root component

Header.vue Articles.vue Footer.vue

Content.vue Comments.vue

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 92

 Composant: Créer un composant
Utilisation de Vue CLI (outils de build) chaque composant est définit dans fichier dédiés avec
l’extension .vue (Single file component - SFC)

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 93

 Composant: Enregistrer un composant
Deux manières de faire :

1. Enregistrement globale

2. Enregistrement locale

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 94

 Composant: Enregistrement local
Pour pouvoir utiliser un composant enfant dans un composant parent, deux opérations sont
nécessaires :

1. Importation du composant

2. Enregistrement du composant (via l’option components)

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 95

 Composant: Enregistrement locale

L'enregistrement local limite la disponibilité des composants enregistrés au composant actuel

uniquement. Cela rend la relation de dépendance plus explicite et est plus adaptée au tree-shaking.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 96

 Composant: Enregistrement global
Rend les composants disponibles globalement dans l’application Vue, en utilisant la
méthode .component()

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)
L'enregistrement global présente quelques inconvénients :

Il empêche les systèmes de build de supprimer les composants inutilisés.

◦ Si vous enregistrez globalement un composant mais que vous ne l'utilisez nulle part dans votre application, il
sera toujours inclus dans le bundle final.

Il rend les relations entre dépendances moins explicites dans les applications de taille importante.
Cela rend difficile la localisation de l'implémentation d'un composant enfant à partir d'un composant
parent qui l'utilise. Cela peut affecter la maintenabilité à long terme, de la même manière que si vous
utilisiez trop de variables globales

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 97

 Composant: passage des paramètres

La transmission des données aux composants se fait à l’aide de l’élément props via des attributs
personnalisés à la balise du composant.

Dans le composant enfant, on déclare le tableau props et y met les props qui seront transmises

Les props sont considérées comme les variables du modèl

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 98

 Composant: passage des paramètres
Les attributs props sont écrites en kebab-case pour séparer les mots dans la balise <template>,

Le kebab-case n'est pas légal en JavaScript. Dans le tableau des props on écrit plutôt les noms
d'attributs sous la forme camelCase, et Vue comprend cela automatiquement !

Articles.vue (child component)

App.vue (parent component)

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 99

 Composant: props static et dynamique
L’attribut passé dans l’exemple précédent est une props static

Pour pouvoir passer des props dynamique on utilisera le v-bind avec une variable du model

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 100

 Composant: type de valeurs
Les props static ne permettent de passer que valeur de type String

Pour le typage des données on utilisera le v-bind lors du passage des données

L’utilisation de v-bind indique à JS qu’il s’agit d’une expression plutôt que d’une chaine de caractères

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 101

 Composant: Passage de props comme Objet
Permet la liaison de plusieurs propriétés à l'aide d'un objet

Utilisation de v-bind sans argument

◦ v-bind permet de passer tous les props de l’objet au composant enfant

◦ Le composant enfant doit être configuré pour recevoir les props correspondante et non pas l’objet lui
même

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 102

 Composant: Validation de props
Les composants peuvent spécifier des exigences pour leurs props, tels que la déclaration
des types.

Si une exigence n'est pas remplie, Vue vous avertira dans la console JavaScript du
navigateur.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 103

 Composant: Props requises
Pour dire à Vue qu’une props est requise, nous devons définir la propriété en tant qu'objet.

Si une props requise n'est pas définie, on aura un avertissement dans la console

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 104

 Composant: props : Valeur par défaut
Pour dire à Vue qu’une props est requise, nous devons définir la propriété en tant qu'objet.

Si une props requise n'est pas définie, on aura un avertissement dans la console

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 105

 Composant: props : Flux à sens unique
Les props forment une liaison à sens unique entre le composant parent et enfant

Si la props parent est màj, elle descendra vers le composant enfant mais pas l’inverse

Dans le cas ou en a besoin de modifier la valeur dans le composant enfant on peut

initialiser une autre variable dans le composant enfant

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 106

 Composant: $emit : Introduction
Les props sont utilisées pour envoyer des données de l'élément parent au composant
enfant.

$emit() est utilisé pour faire l'inverse : transmettre des informations du composant enfant
au parent.

Avec la méthode $emit() intégrée dans Vue, nous pouvons créer un événement
personnalisé dans le composant enfant qui peut être capturé dans l'élément parent.

Le composant parent écoute les event avec v-on (raccourcis @)

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 107

 Composant: $emit : Exemple

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 108

 Composant: $emit : Exemple - 2

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 109

 Composant: $emit : modificateur .self

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 110

 Composant: slot
Les composants échangent les données via les props

Les slots permettent de transférer du contenu des templates

Le composant parent transmet un fragment de template vers l’enfant qui se charge de

l’afficher dans son propre template

La balise <slot> agit comme un espace réservé pour le contenu, de sorte qu'une fois
l'application créée, le <slot> sera remplacé par le contenu qui lui est envoyé.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 111

 Composant: slot
Composant parent

Composant Enfant

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 112

 Composant: slot nommé
Permet d’attribuer des emplacements spécifiques à l’intérieur d’un composant où le
contenue peut être inséré

Les slots par défaut, permettent d’insérer du contenu non attribué

Le slot nommé permet de spécifier un nom pour un slot particulier, ce qui permet de gérer
plusieurs emplacements de contenu dans un composant de manière plus structurée

Nous avons besoin de la directive v-slot (raccourcis #) pour faire référence aux
emplacements nommés.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 113

 Composant: slot nommé

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 114

 Composant: Teleport
La balise teleport est utilisée pour déplacer le contenu vers un autre endroit dans la
structure DOM du document HTML.

Pour déplacer du contenu ailleurs dans la structure DOM, nous utilisons la balise Vue
<Teleport> autour du contenu et l'attribut 'to' pour définir où le déplacer.

La valeur de l'attribut 'to' est donnée en notation CSS, <Teleport

to=".cssTagOfHTMLDirective">.

La cible de téléportation to doit être déjà présente dans le DOM lorsque le

composant <Teleport> est monté. Idéalement, il devrait s'agir d'un élément extérieur à
l'ensemble de l'application Vue. Si vous ciblez un autre élément rendu par Vue, vous devez
vous assurer que cet élément est monté avant le composant <Teleport>.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 115

 Composant: Teleport

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 116

 Composant: Teleport

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 117

Vue Router
 Router: Introduction
§Lors d’une clique sur un lien dans une application web traditionnelle, le navigateur reçoit une
réponse HTML du serveur et recharge la page entière avec le nouveau HTML

§Dans une SPA le JS côté client peut intercepter la navigation, récupérer dynamiquement de nouvelles
données, et mettre à jour la page actuelle sans la recharger entièrement :
§ Expérience utilisateur plus rapide

§ Routage effectué côté client

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 119

 Router: fichier de configuration
§src/router/index.js : permet de définir les différentes routes

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 120

Router: fichiers de configuration :
src/router/index.js

§const routes : tableau d’objet route

§Chaque route est représentée par un objet
contenant :
§ Path : chemin (URL) de la route
§ Name : le nom de la route
§ Component: le composant à appeler au cas où la
route est demandée.
§Les composants doivent être importés avant
d’être référencés

§Permet de configurer l’instance router

§createWebHistory : permet de créer un
historique dans le navigateur afin qu’on puisse
utiliser suivant, revenir en arrière, …

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 121

Router: fichiers de configuration : src/main.js

§Dans ce fichier on importe notre objet router

§Utilisation de la méthode use()

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 122

Router: router-view component
router-view est utilisé dans le contexte des applications Vue.js avec Vue Router .

Son rôle principal est de servir de point d'entrée pour les composants associés aux routes définies
dans l'application.

Il permet d’afficher le contenu du composant associé à l'URL actuelle.

Lorsqu'un utilisateur navigue vers une URL correspondant à une route définie dans l'application,
Vue Router intercepte cette navigation et recherche le composant associé à cette route. Le contenu
de ce composant est ensuite rendu à l'intérieur de router-view.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 123

Router: router-link component
router-link est un composant utilisé dans Vue.js pour la navigation dans les applications à page
unique (SPA) construites avec Vue Router.

Il est similaire à la balise <a> en HTML, mais est optimisé pour une utilisation avec Vue Router.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 124

 Router: router-link component : props
Dans Vue Router, le composant router-link prend en charge plusieurs props pour personnaliser son comportement et son apparence :

to : Spécifie la route cible du lien.

replace : Si défini sur true, la navigation remplacera l’entrée actuelle dans la pile d’historique au lieu d’en ajouter une nouvelle.

append : Si mis à true, le chemin de la route courante sera ajouté à la valeur de la propriété to. Ceci est utile lorsque vous souhaitez créer des
liens de navigation relatifs.

tag : Spécifie la balise HTML à utiliser pour le rendu du lien. Par défaut, il est rendu en tant que balise <a>, mais vous pouvez le modifier en
d’autres balises HTML comme <button> si nécessaire.

active-class : Spécifie la classe à appliquer au lien lorsque sa route cible est active.

exact : Lorsqu’il est défini sur true, le lien ne sera actif que si le chemin correspond exactement à la propriété to. Ceci est utile pour la
correspondance exacte des routes.

event : Spécifie l’événement ou les événements pour déclencher la navigation. Par défaut, il est défini sur "clic", mais vous pouvez le
personnaliser si nécessaire.

exact-active-class : Spécifie la classe à appliquer au lien lorsque sa route cible est exactement active

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 125

Router: route dynamique
Très souvent, nous aurons besoin de cartographier les routes avec le modèle donné au même composant.
Par exemple, nous pouvons avoir un composant User qui doit être rendu pour tous les utilisateurs, mais
avec différents ID utilisateur.

Dans Vue Router, nous pouvons utiliser un segment dynamique dans le chemin pour y parvenir, nous
appelons cela un param :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 126

Router: route dynamique
Un param est indiqué par un deux-points :.

Lorsqu’une route est appariée, la valeur de ses params sera exposée comme route.params dans chaque
composant.

Par conséquent, nous pouvons rendre l’ID utilisateur actuel en mettant à jour le modèle de l’utilisateur
de la façon suivante :

En plus de route.params, l’objet route expose également d’autres informations utiles telles que
route.query (s’il y a une requête dans l’URL), route.hash, etc

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 127

Router: 404 Not found route
Utilisation du pattern : /:catchAll(.*)

Permet d’attraper n’importe quelle route qui n’est pas définit dans le tableau des routes

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 128

Router: Navigation programmatique
La méthode router.push est appelé à chaque fois qu’on clique sur un router-link

Permet d’ajouter une nouvelle entrée dans la pile de l’historique de navigation. Ainsi quand un
utilisateur clique sur le bouton retour de son navigateur, il retournera à l'URL précédent.

La méthode router.go(n) indique de combien d'entrées vers l'avant ou vers l'arrière il faut naviguer dans
la pile de l'historique

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 129

Composition API
 Composition API: Introduction
§Composition API est un ensemble d'API qui permettent de créer des composants Vue en utilisant des fonctions
importées au lieu de déclarer des options.

§Est une fonctionnalité intégrée à Vue 3

§Utilise la syntaxe <script setup> dans les composants mono-fichier

§Elle rassemble les API suivantes :

§ API de réactivité :

§ Hooks de cycle de vie

§ Injection de dépendances :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 131

 Composition API: exemple
§Composition API est un ensemble d'API qui permettent de créer des composants Vue en utilisant des fonctions
importées au lieu de déclarer des options.

§Est une fonctionnalité intégrée à Vue 3

§Utilise la syntaxe <script setup> dans les composants mono-fichier

§Elle rassemble les API suivantes :

§ API de réactivité :

§ Hooks de cycle de vie

§ Injection de dépendances :

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 132

 Composition API: Déclarer un état réactif
§ref() permet de déclarer l’état réactif

§Elle prend l’argument et le renvoi enveloppé dans un objet ref avec la propriété .value

Importation du ref

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 133

 Composition API: <script setup>
§Exposer manuellement l'état et les méthodes via setup() peut être verbeux

§Utilisation de <script setup>

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 134

 Composition API: Computed value

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 135

 Composition API: Composant
§Lors de l'utilisation de SFC avec <script setup>, les composants importés peuvent être utilisés
localement sans enregistrement

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 136

 Composition API: Composant
§Dans une implémentation sans le script setup, l’enregistrement suit le même processus
qu’Option API

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 137

 Composition API: Composant - props
§Dans les SFC utilisant <script setup>, les props peuvent être déclarés à l'aide de la
macro defineProps()

Parent Child

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 138

Firebase
 Firebase: Introduction
§Firebase est une plateforme backend pour créer des applications Web, Android et IOS.

§Il offre une base de données en temps réel, différentes API, plusieurs types d’authentification et une
plateforme d’hébergement.

6-mai-24 AHMED BENTAJER – UM6P-CC - SPD-1 140