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écutesrc/main.js
: l’exécution decreateApp(App).mount('#app')
rend dynamique le template<div id="app">...</div>
deindex.html
count
est réactif : quand sa valeurcount.value
change, les parties du DOM qui le référencent (comme{{ count }}
) changent aussi en temps-réeldans 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 deprops
(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
/src/App.vue
/src/components/CityList.vue
/src/components/CityDetail.vue