VueJS

VueJS est une librairie javascript qui permet de construire des UI web de façon réactive et déclarative.

Comme ReactJS et Angular, il encourage la création et l’utilisation de composants sur le modèle des éléments HTML.

Creation d’un projet VueJS avec Vite

Installation

Exécution dans le serveur de développement :

index.html exécute src/main.js : l’exécution de createApp(App).mount('#app') rend dynamique le template <div id="app">...</div> de index.html
count est réactif : quand sa valeur count.value change, les parties du DOM qui le référencent (comme {{ count }}) changent aussi en temps-réel
dans le code javascript, on doit utiliser count.value
dans le contenu texte des éléments du template, on peut utiliser {{ <expression javascript> }} ; dans l’attribut d’un élément, on peut écrire :<attr>="<expression javascript>". Dans les deux cas, les expressions peuvent être quelconques, multiples (séparées par des ;) et peuvent référencer des variables réactives.

Binding

Contenu d’un élement

’>

Attribut d’un élément

’>

Double binding pour `<input>, <textarea>`

<input v-model="name"> est du sucre syntaxique pour :

Propriétés calculées (computed properties)

Une computed property est un objet réactif dont la valeur est synchronisée sur la valeur d’autres objets réactifs par le biais d’une fonction.

Exemple :

elles apportent beaucoup de déclarativité
les propriétés calculées sont mises en cache selon leurs dépendances ; leur évaluation est paresseuse

Boucles et conditionnelles

La propriété key est indispensable si des insertions / suppressions sont effectuées

Composants

un composant est une vue paramétrable avec des propriétés props fournies par son composant père
un composant peut émettre des événements vers son composant père

props down, events up : les propriétés descendent du père vers le fils, alors que des événements remontent du fils vers le père.
l’héritage des props ne va que du père vers les fils, il ne descend pas vers les petit-fils
un composant émet des événements que seul son père peut écouter (et pas son grand-père)

Le modèle de communication est donc simple et bien cloisonné, strictement entre un père et son fils.

Cycle de vie d’un composant

On peut créer des hooks pour chacun de ces moments du cycle de vie, par exemple :

Configuration de Vite

La configuration de développement de Vite suivante permet d’éviter l’erreur CORS qui interviendrait lorsque que le serveur de développement frontend et le serveur backend tournent sur le même serveur localhost, mais sur des ports différents :

Playground

https://play.vuejs.org

Exemple complet : chat temps-réel

Back-end

Front-end VueJS

Routage des URL front-end

Avec un site web statique dont les pages sont générées côté serveur, lors d’un changement d’url, le navigateur envoie une requête au serveur et remplace la vue par le contenu fourni par le serveur.

Avec une application SPA, le code JS peut surveiller et intercepter les changements de window.location.href et mettre à jour le DOM en fonction de règles fournies par un module appelé routeur.

Vue-router

Le routage des url par le client n’est pas assuré par VueJS lui-même, mais par un module tiers : vue-router.

main.js

/src/App.vue

router/index.js

components/ComponentA.vue

components/ComponentB.vue

Algorithmique

à chaque fois qu’un nouvel url est poussé (router.push, lien <router-link>), ou modifié (router.go), la table de routage est consultée et la première règle qui s’applique est prise en compte. Toutes les autres sont ignorées.
le tag <router-view /> de plus haut niveau est remplacé par le composant spécifié par la règle active. Selon la valeur de props (booléen, objet, fonction), les props du composant sont affectées (voir plus loin)
si la route contient des children, le même algorithme est appelé récursivement pour peupler les <router-view /> emboités

Le plugin Vue dans le navigateur permet de suivre les associations entre routes et instances de <router-view />

Passage des `props` aux composants d’une route

Mode booléen

Indiquer props: true passe au composant référencé par la route, tout l’objet route.params en tant que props. Par exemple :

Ici c’est l’objet { id, postid } qui est passé comme props au composant Post associé à la route

Mode objet

Quand props dans la définition de la route est un objet, c’est lui qui sera passé tel-quel au composant

Mode fonction

Quand props dans la définition de la route est une fonction, c’est la valeur de cette fonction qui sera passée au composant. Cette fonction prend comme argument l’objet route. Par exemple :

Exemple complet

/src/router/index.js

/src/use/useCities.js