Passer au contenu principal
Accéder à l'ensemble des vidéos de ce cours en illimité à partir de 99€HT/an.
Retour aux cours

Cours Vue.js

Ce cours vidéo, enregistré lors d'une formation Vue.js Initiation + Approfondissement, vous apprend à construire des interfaces réactives avec Vue 3, Vite et la Composition API. Après une présentation de Vue.js face à React et Angular et la création d'un projet avec create-vue, vous découvrez les composants monofichiers (.vue), la comparaison Options API / Composition API, les données réactives (ref, reactive, computed), la liaison d'attributs, la gestion des événements et de leurs modificateurs, le data binding des formulaires avec v-model, le rendu conditionnel (v-if, v-show) et le rendu de liste (v-for). Quatre TP corrigés pas à pas (carte de profil, événements, formulaire d'inscription avec validation des saisies, catalogue de produits) consolident ces bases.

La partie approfondissement aborde l'architecture d'une application à composants : composants globaux et asynchrones, alias Vite, hooks de cycle de vie, watch, références de template, props, defineExpose(), événements personnalisés avec defineEmits(), slots par défaut, nommés et à portée, puis la navigation entre les vues avec Vue Router (routes, RouterLink, RouterView). Le cours s'adresse aux développeurs web et intégrateurs qui veulent adopter Vue.js ; une bonne maîtrise de JavaScript (fonctions fléchées, objets, tableaux) et des bases de HTML/CSS est nécessaire.

Découvrir Vue.js et initialiser un projet

pourquoi vue.js : progressivité, réactivité, composants

Pourquoi Vue.js : progressivité, réactivité, composants

Facile 00:04:07
vue.js face à react et angular

Vue.js face à React et Angular

Facile 00:03:22
créer un projet vue.js avec npm create vue@latest

Créer un projet Vue.js avec npm create vue@latest

Facile 00:02:43
installer les dépendances et lancer le serveur vite

Installer les dépendances et lancer le serveur Vite

Facile 00:04:06
structure d'un projet vue.js et extension vs code

Structure d'un projet Vue.js et extension VS Code

Facile 00:01:37
rendu déclaratif et premier fichier .vue

Rendu déclaratif et premier fichier .vue

Facile 00:02:08
index.html et main.js : le point d'entrée

index.html et main.js : le point d'entrée

Facile 00:02:58
createapp() et montage sur l'élément #app

createApp() et montage sur l'élément #app

Facile 00:04:11
composant monofichier : template, script et style

Composant monofichier : template, script et style

Facile 00:02:47

Données réactives : ref(), reactive() et interpolation

préparer le composant d'introduction et la consigne du tp

Préparer le composant d'introduction et la consigne du TP

Facile 00:05:06
importer et afficher un composant dans app.vue

Importer et afficher un composant dans App.vue

Facile 00:05:40
importer ref() et reactive() depuis vue

Importer ref() et reactive() depuis vue

Facile 00:03:29
déclarer les composants optioncounter et compositioncounter

Déclarer les composants OptionCounter et CompositionCounter

Facile 00:03:34
ref() ou reactive() : créer des données réactives

ref() ou reactive() : créer des données réactives

Facile 00:04:30
afficher des données avec l'interpolation {{ }}

Afficher des données avec l'interpolation {{ }}

Facile 00:05:49
options api : export default et data()

Options API : export default et data()

Facile 00:03:43
options api : propriétés calculées computed et this

Options API : propriétés calculées computed et this

Facile 00:03:30
options api : methods et incrémentation

Options API : methods et incrémentation

Facile 00:02:20
composition api : ref() et computed()

Composition API : ref() et computed()

Facile 00:04:58
rappel javascript : simplifier une fonction fléchée

Rappel JavaScript : simplifier une fonction fléchée

Facile 00:02:37
composition api : la fonction increment

Composition API : la fonction increment

Facile 00:03:26

Options API ou Composition API : deux compteurs

v-model : liaison bidirectionnelle sur un input

v-model : liaison bidirectionnelle sur un input

Facile 00:02:53
compteur avec @click et insertion des composants

Compteur avec @click et insertion des composants

Facile 00:03:05
template de compositioncounter : count, double et @click

Template de CompositionCounter : count, double et @click

Facile 00:05:06
template d'optioncounter et rappel options api

Template d'OptionCounter et rappel Options API

Facile 00:04:44
composition api : ne pas oublier <script setup>

Composition API : ne pas oublier <script setup>

Facile 00:03:29
options api ou composition api : quelles différences ?

Options API ou Composition API : quelles différences ?

Facile 00:03:27
ajouter une feuille de style globale via main.js

Ajouter une feuille de style globale via main.js

Facile 00:03:02
bilan : le rendu déclaratif avec deux compteurs

Bilan : le rendu déclaratif avec deux compteurs

Facile 00:02:45

Liaison d'attributs : :class, :disabled, :href

nouveau projet : vue devtools et feuille css

Nouveau projet : Vue DevTools et feuille CSS

Facile 00:03:03
composant intro du chapitre liaison d'attributs

Composant intro du chapitre liaison d'attributs

Facile 00:03:44
déclarer les données à lier : name, active, size, url

Déclarer les données à lier : name, active, size, url

Facile 00:04:48
classes css, titre et v-model sur le nom

Classes CSS, titre et v-model sur le nom

Facile 00:03:54
lier une classe conditionnelle avec :class

Lier une classe conditionnelle avec :class

Facile 00:04:57
désactiver un bouton avec :disabled et basculer un état

Désactiver un bouton avec :disabled et basculer un état

Facile 00:04:13
curseur range, v-model.number et lien :href

Curseur range, v-model.number et lien :href

Facile 00:04:01

Gestion des événements et modificateurs

objectifs du chapitre événements et vue devtools

Objectifs du chapitre événements et Vue DevTools

Facile 00:02:39
préparer un compteur et un message réactifs

Préparer un compteur et un message réactifs

Facile 00:04:41
une fonction increment(event) et event.type

Une fonction increment(event) et event.type

Facile 00:02:53
@click, raccourci de v-on:click

@click, raccourci de v-on:click

Facile 00:03:51
un événement est un signal : bouton décrémenter

Un événement est un signal : bouton décrémenter

Facile 00:02:28
modificateur .once : réinitialiser une seule fois

Modificateur .once : réinitialiser une seule fois

Facile 00:03:03
formulaire : @submit.prevent et @keyup.enter

Formulaire : @submit.prevent et @keyup.enter

Facile 00:05:56
arrêter la propagation avec @click.stop

Arrêter la propagation avec @click.stop

Facile 00:05:20
tester le formulaire et bilan sur les événements

Tester le formulaire et bilan sur les événements

Facile 00:04:20

TP : carte de profil

présentation des tp et énoncé du tp1 : carte de profil

Présentation des TP et énoncé du TP1 : carte de profil

Moyen 00:04:09
rôle des fichiers vite.config.js et package.json

Rôle des fichiers vite.config.js et package.json

Moyen 00:02:37
tp1 : déclarer les données réactives avec ref()

TP1 : déclarer les données réactives avec ref()

Moyen 00:05:39
tp1 : titre et v-model sur le prénom

TP1 : titre et v-model sur le prénom

Moyen 00:04:16
tp1 : curseur de taille avec v-model.number

TP1 : curseur de taille avec v-model.number

Moyen 00:05:37
tp1 : alterner les classes bleu et rouge avec :class

TP1 : alterner les classes bleu et rouge avec :class

Moyen 00:03:42
tp1 : taille du texte avec :style et interpolation

TP1 : taille du texte avec :style et interpolation

Moyen 00:02:47
tp1 : :disabled avec trim(), bascule de couleur et :href

TP1 : :disabled avec trim(), bascule de couleur et :href

Moyen 00:05:45

TP : événements et modificateurs

énoncé du tp2 : événements et modificateurs

Énoncé du TP2 : événements et modificateurs

Moyen 00:02:16
tp2 : déclarer count, message et draft avant de coder

TP2 : déclarer count, message et draft avant de coder

Moyen 00:05:05
tp2 : la fonction increment(event) et .value

TP2 : la fonction increment(event) et .value

Moyen 00:03:24
tp2 : la fonction submit et une valeur par défaut avec ||

TP2 : la fonction submit et une valeur par défaut avec ||

Moyen 00:03:13
tp2 : compteur, boutons @click et réinitialisation .once

TP2 : compteur, boutons @click et réinitialisation .once

Moyen 00:05:50
tp2 : @submit.prevent, l'équivalent de preventdefault()

TP2 : @submit.prevent, l'équivalent de preventDefault()

Moyen 00:02:18
tp2 : liaison manuelle :value et @input

TP2 : liaison manuelle :value et @input

Moyen 00:03:38
tp2 : détecter la touche entrée avec @keyup.enter

TP2 : détecter la touche Entrée avec @keyup.enter

Moyen 00:02:07
tp2 : stopper la propagation avec .stop et role="status"

TP2 : stopper la propagation avec .stop et role="status"

Moyen 00:03:36
tp2 : tester le compteur et le formulaire

TP2 : tester le compteur et le formulaire

Moyen 00:03:33
tp2 : vérifier la propagation et l'effet de .stop

TP2 : vérifier la propagation et l'effet de .stop

Moyen 00:03:14

Formulaires et data binding avec v-model

repartir d'un projet existant avec npm ci

Repartir d'un projet existant avec npm ci

Moyen 00:02:45
déclarer les données d'un formulaire avec ref()

Déclarer les données d'un formulaire avec ref()

Moyen 00:04:37
liaison manuelle d'un champ : :value et @input

Liaison manuelle d'un champ : :value et @input

Moyen 00:04:08
liaison manuelle : les deux sens donnée ↔ champ

Liaison manuelle : les deux sens donnée ↔ champ

Moyen 00:03:16
v-model.trim et v-model.number

v-model.trim et v-model.number

Moyen 00:05:33
v-model sur une case à cocher et une liste select

v-model sur une case à cocher et une liste select

Moyen 00:03:42
v-model sur des boutons radio

v-model sur des boutons radio

Moyen 00:03:20
afficher et tester toutes les valeurs du formulaire

Afficher et tester toutes les valeurs du formulaire

Moyen 00:03:43
bilan : l'intérêt de v-model et des directives

Bilan : l'intérêt de v-model et des directives

Moyen 00:02:49

Rendu conditionnel : v-if et v-show

rendu conditionnel : v-if, v-else-if, v-else et v-show

Rendu conditionnel : v-if, v-else-if, v-else et v-show

Moyen 00:04:36
exemple v-if / v-else et documentation officielle

Exemple v-if / v-else et documentation officielle

Moyen 00:03:12
créer un objet réactif avec reactive()

Créer un objet réactif avec reactive()

Moyen 00:05:35
v-if retire l'élément du dom : vérification à l'inspecteur

v-if retire l'élément du DOM : vérification à l'inspecteur

Moyen 00:03:49
basculer une condition avec un bouton @click

Basculer une condition avec un bouton @click

Moyen 00:04:09
v-show : masquer avec display sans retirer du dom

v-show : masquer avec display sans retirer du DOM

Moyen 00:05:05
v-if pour protéger l'accès à une propriété non définie

v-if pour protéger l'accès à une propriété non définie

Moyen 00:06:20
bilan du rendu conditionnel

Bilan du rendu conditionnel

Moyen 00:02:00

TP : formulaire d'inscription et validation

tp3 : énoncé et création du projet d'inscription

TP3 : énoncé et création du projet d'inscription

Moyen 00:03:43
tp3 : nettoyer app.vue et importer sa feuille css

TP3 : nettoyer App.vue et importer sa feuille CSS

Moyen 00:02:36
tp3 : déclarer les données réactives du formulaire

TP3 : déclarer les données réactives du formulaire

Moyen 00:05:55
tp3 : la fonction submit et l'accès à .value

TP3 : la fonction submit et l'accès à .value

Moyen 00:03:27
tp3 : valider le prénom et l'e-mail avec trim() et une regex

TP3 : valider le prénom et l'e-mail avec trim() et une regex

Moyen 00:06:22
tp3 : valider l'âge avec typeof et number.isinteger()

TP3 : valider l'âge avec typeof et Number.isInteger()

Moyen 00:06:06
tp3 : vérifier les conditions et créer le récapitulatif

TP3 : vérifier les conditions et créer le récapitulatif

Moyen 00:05:16
tp3 : la fonction reset() pour réinitialiser le formulaire

TP3 : la fonction reset() pour réinitialiser le formulaire

Moyen 00:04:33
tp3 : structure du template et @submit.prevent

TP3 : structure du template et @submit.prevent

Moyen 00:04:46
tp3 : champs prénom et e-mail avec v-model.trim

TP3 : champs prénom et e-mail avec v-model.trim

Moyen 00:03:56
tp3 : champ âge avec v-model.number, min et step

TP3 : champ âge avec v-model.number, min et step

Moyen 00:03:39
tp3 : liste déroulante <select> liée avec v-model

TP3 : liste déroulante <select> liée avec v-model

Moyen 00:02:52
tp3 : boutons radio de modalité dans un fieldset

TP3 : boutons radio de modalité dans un fieldset

Moyen 00:04:18
tp3 : case à cocher des conditions et boutons d'action

TP3 : case à cocher des conditions et boutons d'action

Moyen 00:04:28
tp3 : afficher l'erreur avec v-if et role="alert"

TP3 : afficher l'erreur avec v-if et role="alert"

Moyen 00:01:53
tp3 : afficher le récapitulatif avec v-if et v-else

TP3 : afficher le récapitulatif avec v-if et v-else

Moyen 00:04:02
tp3 : message distanciel avec v-show

TP3 : message distanciel avec v-show

Moyen 00:03:34
tp3 : premier test du formulaire d'inscription

TP3 : premier test du formulaire d'inscription

Moyen 00:01:46
tp3 : tester v-show, les erreurs et la réinitialisation

TP3 : tester v-show, les erreurs et la réinitialisation

Moyen 00:05:20

Rendu de liste avec v-for et propriétés calculées

rendu de liste : pourquoi utiliser v-for

Rendu de liste : pourquoi utiliser v-for

Moyen 00:03:04
déclarer des tableaux réactifs avec ref()

Déclarer des tableaux réactifs avec ref()

Moyen 00:04:15
v-for : parcourir un tableau avec item et index

v-for : parcourir un tableau avec item et index

Moyen 00:04:45
v-for sur un tableau d'objets et :key avec l'id

v-for sur un tableau d'objets et :key avec l'id

Moyen 00:05:38
v-for face à une boucle javascript : bilan

v-for face à une boucle JavaScript : bilan

Moyen 00:03:41
nommer l'alias et l'index dans v-for

Nommer l'alias et l'index dans v-for

Moyen 00:03:48
index et valeur d'un tableau, et rôle de :key

Index et valeur d'un tableau, et rôle de :key

Moyen 00:03:46
propriétés calculées : réactivité et mise en cache

Propriétés calculées : réactivité et mise en cache

Moyen 00:04:51
computed() : déclarer countdouble à partir de count

computed() : déclarer countDouble à partir de count

Moyen 00:04:46
afficher une propriété calculée dans le template

Afficher une propriété calculée dans le template

Moyen 00:03:09
incrémenter count et observer le recalcul

Incrémenter count et observer le recalcul

Moyen 00:03:45
énoncé de l'atelier : liste de tâches

Énoncé de l'atelier : liste de tâches

Moyen 00:01:49

TP : catalogue de produits

tp4 : déclarer nextid, showdescription et le formulaire

TP4 : déclarer nextId, showDescription et le formulaire

Moyen 00:03:45
tp4 : addproduct() et validation du nom avec trim()

TP4 : addProduct() et validation du nom avec trim()

Moyen 00:03:01
tp4 : valider le prix avec typeof et number.isfinite()

TP4 : valider le prix avec typeof et Number.isFinite()

Moyen 00:04:47
tp4 : valider le stock et afficher le message d'erreur

TP4 : valider le stock et afficher le message d'erreur

Moyen 00:05:43
tp4 : ajouter le produit avec push() et nextid

TP4 : ajouter le produit avec push() et nextId

Moyen 00:06:04
tp4 : réinitialiser le formulaire après l'ajout

TP4 : réinitialiser le formulaire après l'ajout

Moyen 00:02:45
tp4 : supprimer un produit par son id avec filter()

TP4 : supprimer un produit par son id avec filter()

Moyen 00:06:54
tp4 : supprimer le dernier produit avec pop()

TP4 : supprimer le dernier produit avec pop()

Moyen 00:03:36
tp4 : titre et nombre de produits avec length

TP4 : titre et nombre de produits avec length

Moyen 00:02:51
tp4 : bouton pour afficher ou masquer les descriptions

TP4 : bouton pour afficher ou masquer les descriptions

Moyen 00:04:16
tp4 : v-if, v-for avec index et :key sur l'id

TP4 : v-if, v-for avec index et :key sur l'id

Moyen 00:06:08
tp4 : classe dynamique pour un stock à zéro

TP4 : classe dynamique pour un stock à zéro

Moyen 00:03:16
tp4 : position, nom, prix avec tofixed(2) et stock

TP4 : position, nom, prix avec toFixed(2) et stock

Moyen 00:03:37
tp4 : disponibilité avec v-if/v-else, description v-show

TP4 : disponibilité avec v-if/v-else, description v-show

Moyen 00:04:45
tp4 : bouton supprimer et message « aucun produit »

TP4 : bouton supprimer et message « aucun produit »

Moyen 00:03:34
tp4 : bouton « supprimer le dernier » désactivé si vide

TP4 : bouton « supprimer le dernier » désactivé si vide

Moyen 00:03:45
tp4 : formulaire d'ajout, @submit.prevent et novalidate

TP4 : formulaire d'ajout, @submit.prevent et novalidate

Moyen 00:04:36
tp4 : champ stock, textarea et bouton de soumission

TP4 : champ stock, textarea et bouton de soumission

Moyen 00:03:39
tp4 : message d'erreur et <style scoped>

TP4 : message d'erreur et <style scoped>

Moyen 00:06:37
tp4 : tester le catalogue et bilan du tp

TP4 : tester le catalogue et bilan du TP

Moyen 00:04:16

Composants globaux, alias Vite et composants asynchrones

les props : faire communiquer parent et enfant

Les props : faire communiquer parent et enfant

Difficile 00:04:01
enregistrer un composant global avec app.component()

Enregistrer un composant global avec app.component()

Difficile 00:05:52
nom du composant global et création du fichier .vue

Nom du composant global et création du fichier .vue

Difficile 00:05:01
définir un alias pour le dossier components dans vite

Définir un alias pour le dossier components dans Vite

Difficile 00:04:39
créer inputreactive et importer les fonctions de vue

Créer InputReactive et importer les fonctions de vue

Difficile 00:05:45
defineasynccomponent() : déclarer un composant asynchrone

defineAsyncComponent() : déclarer un composant asynchrone

Difficile 00:03:22
composant monté : rôle de onmounted() et usetemplateref()

Composant monté : rôle de onMounted() et useTemplateRef()

Difficile 00:02:01
pourquoi charger un composant de façon asynchrone

Pourquoi charger un composant de façon asynchrone

Difficile 00:02:57
afficher ou masquer inputreactive avec une fonction toggle

Afficher ou masquer InputReactive avec une fonction toggle

Difficile 00:04:06

Cycle de vie des composants, watch et refs de template

hooks de cycle de vie et watch : vue d'ensemble

Hooks de cycle de vie et watch : vue d'ensemble

Difficile 00:06:08
watch() : surveiller une ref et ses deux valeurs

watch() : surveiller une ref et ses deux valeurs

Difficile 00:05:04
watch() sur une propriété d'un objet reactive()

watch() sur une propriété d'un objet reactive()

Difficile 00:05:16
usetemplateref(), onbeforemount() et onmounted()

useTemplateRef(), onBeforeMount() et onMounted()

Difficile 00:05:29
mise à jour et destruction : onupdated(), onunmounted()

Mise à jour et destruction : onUpdated(), onUnmounted()

Difficile 00:05:15
afficher inputreactive avec v-if et un bouton

Afficher InputReactive avec v-if et un bouton

Difficile 00:04:58
tester inputreactive : v-model, ref de template et hooks

Tester InputReactive : v-model, ref de template et hooks

Difficile 00:03:06
référencer un composant enfant avec usetemplateref()

Référencer un composant enfant avec useTemplateRef()

Difficile 00:05:10

Props, defineExpose() et imbrication de composants

props : le parent transmet des données à l'enfant

Props : le parent transmet des données à l'enfant

Difficile 00:06:03
typer une prop : type et default

Typer une prop : type et default

Difficile 00:03:16
appeler une méthode de l'enfant depuis le parent

Appeler une méthode de l'enfant depuis le parent

Difficile 00:05:11
defineexpose() : exposer une fonction au parent

defineExpose() : exposer une fonction au parent

Difficile 00:05:20
afficher une prop dans le template de l'enfant

Afficher une prop dans le template de l'enfant

Difficile 00:02:50
réutiliser un composant pour éviter de répéter le code

Réutiliser un composant pour éviter de répéter le code

Difficile 00:03:18
un seul h1 par page : composants et accessibilité

Un seul h1 par page : composants et accessibilité

Difficile 00:02:24

Slots à portée

les slots : transmettre du contenu html à un enfant

Les slots : transmettre du contenu HTML à un enfant

Difficile 00:04:14
erreur « aucun template ni script » dans un fichier .vue

Erreur « aucun template ni script » dans un fichier .vue

Difficile 00:01:57
slot à portée : préparer la prop items de l'enfant

Slot à portée : préparer la prop items de l'enfant

Difficile 00:03:16
v-for et :key pour parcourir la liste des items

v-for et :key pour parcourir la liste des items

Difficile 00:05:07
transmettre item et index au parent via <slot>

Transmettre item et index au parent via <slot>

Difficile 00:04:49
parent : passer le tableau items au composant liste

Parent : passer le tableau items au composant liste

Difficile 00:05:12
parent : lire les props du slot avec <template #default>

Parent : lire les props du slot avec <template #default>

Difficile 00:05:51
le parent décide de l'affichage du slot à portée

Le parent décide de l'affichage du slot à portée

Difficile 00:05:01

Événements personnalisés et slots nommés

defineemits() : déclarer un événement émis par l'enfant

defineEmits() : déclarer un événement émis par l'enfant

Difficile 00:03:01
accéder aux props dans le script : const props

Accéder aux props dans le script : const props

Difficile 00:02:28
écouter l'événement de l'enfant côté parent

Écouter l'événement de l'enfant côté parent

Difficile 00:03:02
déclencher l'émission avec un bouton et tester

Déclencher l'émission avec un bouton et tester

Difficile 00:04:13
slots nommés et contenu par défaut dans l'enfant

Slots nommés et contenu par défaut dans l'enfant

Difficile 00:03:45
remplir un slot nommé depuis le parent avec <template #nom>

Remplir un slot nommé depuis le parent avec <template #nom>

Difficile 00:05:57
props ou slots : quelle différence ?

Props ou slots : quelle différence ?

Difficile 00:01:38

Gérer la navigation avec Vue Router

vue router : naviguer entre les vues sans rechargement

Vue Router : naviguer entre les vues sans rechargement

Difficile 00:02:18
installer vue router dans un projet existant

Installer Vue Router dans un projet existant

Difficile 00:02:46
créer un projet avec l'option router de create-vue

Créer un projet avec l'option Router de create-vue

Difficile 00:03:11
router/index.js : createrouter() et createwebhistory()

router/index.js : createRouter() et createWebHistory()

Difficile 00:02:05
déclarer les routes : path, name et component

Déclarer les routes : path, name et component

Difficile 00:02:49
créer le routeur et l'exporter vers main.js

Créer le routeur et l'exporter vers main.js

Difficile 00:03:03
pages et barre de navigation avec <routerlink :to>

Pages et barre de navigation avec <RouterLink :to>

Difficile 00:04:12
app.vue : intégrer le composant de navigation

App.vue : intégrer le composant de navigation

Difficile 00:02:14
<routerview> : afficher le composant de la route active

<RouterView> : afficher le composant de la route active

Difficile 00:03:22
bilan : mettre en place les routes avec vue router

Bilan : mettre en place les routes avec Vue Router

Difficile 00:02:57