Vue.js 3 - Formation complète pour débutant
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Vue.js 3 - Formation complète pour débutant

Mediaforma
50,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Cette formation vidéo a été conçue pour les développeurs JavaScript qui veulent apprendre à utiliser la version 3 du framework Vue.js.

Contrairement aux autres frameworks JavaScript, Vue.js peut être adopté au fur et à mesure des besoins. Il peut également cohabiter avec une logique JavaScript existante sans interférer avec elle.
Vous utiliserez Vue.js pour :

  • Créer des interfaces utilisateur réactives,
  • Ajouter des fonctionnalités à un projet Web existant,
  • Créer des applications Web SPA,
  • Créer des applications pour mobiles Android et iOS,
  • Créer des projets complexes à plusieurs programmeurs.
     

Si Vue.js est si populaire, c'est certainement parce qu'il est simple à mettre en place, qu'il offre de très bonnes performances (surtout la version 3) et qu'il peut être utilisé de façon plus ou moins poussée, en fonction des besoins.

Lorsque je me suis lancé dans la création de cette formation en ligne, deux choix s'offraient à moi :

  • Créer un fil rouge et y intégrer petit à petit les différents concepts appris tout au long de la formation.
  • Créer des exemples indépendants pour apprendre facilement et rapidement les différents concepts de Vue.js.

Je suis formateur en présentiel et j'ai pu expérimenter ces deux approches.
Bien que la première ait ses fervents adeptes, la seconde donne de meilleurs résultats au niveau de l'apprentissage, car chaque exemple peut être choisi de façon extrêmement précise, sans avoir à suivre une logique d'intégration globale qui pourrait faire négliger certains aspects de ce qui doit être appris. C'est donc cette seconde approche qui a été adoptée. Ceci étant dit, un projet de plus grande ampleur vous sera proposé à la fin des deux premières parties de la formation. Vous pourrez ainsi mettre en pratique bon nombre des techniques que vous avez apprises.

Chaque sujet est abordé de façon indépendante et illustre un aspect particulier de Vue.js : propriétés calculées, data binding, directives, gestion événementielle, classes conditionnelles, props, custom events, lifecycle hooks, directives personnalisées, Vuex, composant Teleport, API de composition, etc. etc..

De très nombreux exercices vous sont proposés sous la forme de challenges. Lorsqu'on vous demande d'arrêter le défilement de la vidéo, jouez le jeu : arrêtez la vidéo et codez comme vous l'entendez, en partant d'un squelette standard ou d'une page vide. Vous verrez qu'en procédant ainsi, votre apprentissage sera très rapide. Lorsque vous avez fini de coder, vous pouvez reprendre le défilement de la vidéo : une correction vous sera alors proposée.
 

Au programme de cette formation Vue.JS 3

Cette formation est très complète. Voici quelques-uns des sujets abordés :

  • Programmation standard en Vue 3 : contrôle du DOM, définition et partage de données, propriétés calculées, data binding, directives, gestion évènementielle, classes conditionnelles.
  • Composants locaux et globaux, communication entre les composants et l'application, hiérarchisation des composants pour créer une application complexe, slots, filtres, watchers, transitions et animations, communication asynchrone avec des services Web.
  • Applications SPA (routage, indicateurs de navigation).
  • Interface en ligne de commande Vue-Cli (création d'applications, render methods, composants fonctionnels).
  • Gestionnaire d'état Vuex, Vue.observable(), plugins.
  • Mixins, directives personnalisées, applications mobiles, composant Teleport, API de composition.

Tous les codes sources et ressources sont fournis en accompagnement de chaque vidéo.
Un QCM vous sera proposé pour valider vos acquis en fin de cours.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur Vue.js.

Je ne peux vous conseiller qu'une chose : expérimentez le code par vous-même, codez et progressez à votre rythme.
Petit à petit, Vue.js vous semblera de plus en plus familier et vous apprécierez sa puissance et sa souplesse.

Alors : Happy coding !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Premiers pas en Vue.js 3
Chapitre 2
Les composants Vue.js
Chapitre 3
Les applications SPA (Single Page Applications)
Chapitre 4
L'interface en ligne de commande Vue-Cli
Chapitre 5
Le gestionnaire d'état Vuex
Chapitre 6
Le gestionnaire d'état Pinia
Chapitre 7
Persistance des données avec Firebase

Plan détaillé du cours

Chapitre 1 : Premiers pas en Vue.js 3
3h38m
 
Leçon 101 - Principes clés de Vue.js
Leçon 202 - Préparation de l'environnement de développement
Leçon 303 - Le modèle MVVM de Vue.js
Leçon 404 - Un premier projet Vue.js
Leçon 505 - Un deuxième exemple (projet3)
Leçon 606 - Propriétés calculées
Leçon 707 - Data binding
Leçon 808 - innerHTML et nœud texte
Leçon 909 - Binding bidirectionnel
Leçon 1010 - Utilisation conjointe des directives v-model et v-bind
Leçon 1111 - Gestion évènementielle
Leçon 1212 - L'objet $event dans la gestion évènementielle
Leçon 1313 - Les fonctions stopPropagation() et preventDefault() de l'objet $event
Leçon 1414 - Suffixes stop et prevent de Vue
Leçon 1515 - La directive v-for
Leçon 1616 - Arguments dynamiques
Leçon 1717 - Directive v-for pour parcourir des objets JSON
Leçon 1818 - Gestion des évènements clavier
Leçon 1919 - La directive v-cloak
Leçon 2020 - La directive v-once
Leçon 2121 - Classes conditionnelles
Leçon 2222 - Gestion des styles inline
Leçon 2323 - Afficher du code HTML conditionnellement
Leçon 2424 - Super challenge - Partie 1
Leçon 2525 - Super challenge - Partie 2
Leçon 2626 - Super challenge - Partie 3
Chapitre 2 : Les composants Vue.js
2h52m
 
Leçon 127 - Les composants Vue JS - Introduction
Leçon 228 - Un premier composant local
Leçon 329 - Ajouter des données dans un composant
Leçon 430 - Ajouter des méthodes dans un composant
Leçon 531 - Passer des données aux composants enfants avec des props
Leçon 632 - Accès à une prop dans le modèle du composant
Leçon 733 - Passer des données de l'application aux composants enfants
Leçon 834 - Custom-events - Envoi de messages au parent par un composant avec $emit
Leçon 935 - Lifecycle Hooks
Leçon 1036 - Organiser une application en hiérarchie de composants
Leçon 1137 - Passer des données à un composant avec des slots
Leçon 1238 - Slots nommés
Leçon 1339 - Slots avec portée (scoped slots)
Leçon 1440 - Filtres
Leçon 1541 - Observateurs (watchers)
Leçon 1642 - Requêtes asynchrones dans un observateur
Leçon 1743 - Animations et transitions en JavaScript
Leçon 1844 - Transitions d'entrée et de sortie avec VueJS
Leçon 1945 - Transitions d'entrée et de sortie non simultanées
Leçon 2046 - Transitions entre éléments
Leçon 2147 - Transitions de listes
Leçon 2248 - Transitions d'entrée et de sortie avec animate.css
Leçon 2349 - Animations en JavaScript
Chapitre 3 : Les applications SPA (Single Page Applications)
29m10s
 
Leçon 150 - Création d'une application SPA avec vue-router
Leçon 251 - Indicateurs de navigation - Vue Router Navigation Guards
Leçon 352 - Routage – Transition entre les pages
Chapitre 4 : L'interface en ligne de commande Vue-Cli
1h03m
 
Leçon 153 - L'interface en ligne de commande Vue-Cli
Leçon 254 - Architecture de l'application
Leçon 355 - Création et modification d'une application avec Vue-Cli
Leçon 456 - Une deuxième application avec Vue-Cli
Leçon 557 - Fonctions de rendu (Render Functions)
Leçon 658 - Templates vs render functions & JSX
Leçon 759 - Composants fonctionnels
Leçon 860 - Utilisation des paramètres props et context
Chapitre 5 : Le gestionnaire d'état Vuex
1h33s
 
Leçon 161 - Le gestionnaire d'état Vuex
Leçon 262 - Accès aux méthodes du store dans les composants
Leçon 363 - Accès à l'état du store dans les composants
Leçon 464 - L'option plugins de Vuex
Leçon 565 - Alternative à Vuex
Leçon 666 - Vuex et les formulaires
Leçon 767 - Validation d'un formulaire dans VueJS
Chapitre 6 : Le gestionnaire d'état Pinia
23m58s
 
Leçon 1Introduction à Pinia et génération de l'application
Leçon 2Ménage dans les fichiers et première version de l'interface
Leçon 3Création du store Pinia
Leçon 4Interfaçage du store dans le composant App.vue
Leçon 5Accès au store Pinia dans un composant enfant
Chapitre 7 : Persistance des données avec Firebase
42m30s
 
Leçon 1Introduction à Firebase
Leçon 2Création d'un projet Firebase
Leçon 3Création de la base de données Cloud Firestore
Leçon 4Connexion Firebase-Vue
Leçon 5Affichage des données dans le DOM
Leçon 6Saisie et suppression des notes dans l'application
Chapitre 8 : Plus loin avec Vue.js
1h51m
 
Leçon 168 - Mixins
Leçon 269 - Mixin global
Leçon 370 - Plugins
Leçon 471 - Directives personnalisées
Leçon 572 - Rendre son code robuste grâce aux props typées
Leçon 6Applications pour mobiles - Découverte du framework NativeScript-vue
Leçon 7Applications pour mobiles - Mise en pratique avec un exercice
Leçon 874 - Le composant Teleport
Leçon 975 - L'API de composition
Leçon 1076 - Deuxième approche – Utilisation de la fonction reactive()
Leçon 1177 - Troisième approche – Utilisation de la fonction computed()
Leçon 1278 - Quatrième approche – Externalisation du calcul réactif
Leçon 13Lecture asynchrone dans l'API de composition
Leçon 1479 - Vue 3 et TypeScript

Avis des apprenants

Détail des avis
7
Apprenants
1
Commentaire
4/5
Note moyenne
5/5
0
4/5
1
3/5
0
2/5
0
1/5
0
Pirig
Pirig
Publié le 25/09/2022
J'aime bien le principe des challenges. Dommage que vue-cli et Typescript ne soient pas utilisés par défaut tout au long de cette formation.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Vue.js 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données