50,00

Tuto Vue.js 3 - Formation complète pour débutant avec Vue-JS, JavaScript

50,00

  • Une formation vidéo de 10h38m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Vue.js 3 - Formation complète pour débutant

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation Vue-JS, JavaScript (durée : 10h38m)

  • Premiers pas en Vue.js 3
    • 01 - Principes clés de Vue.js 00:03:40
    • 02 - Préparation de l'environnement de développement 00:09:54
    • 03 - Le modèle MVVM de Vue.js 00:02:48
    • 04 - Un premier projet Vue.js 00:14:12
    • 05 - Un deuxième exemple (projet3) 00:07:08
    • 06 - Propriétés calculées 00:09:54
    • 07 - Data binding 00:05:56
    • 08 - innerHTML et nœud texte 00:13:45
    • 09 - Binding bidirectionnel 00:09:59
    • 10 - Utilisation conjointe des directives v-model et v-bind 00:13:19
    • 11 - Gestion évènementielle 00:09:24
    • 12 - L'objet $event dans la gestion évènementielle 00:05:53
    • 13 - Les fonctions stopPropagation() et preventDefault() de l'objet $event 00:09:57
    • 14 - Suffixes stop et prevent de Vue 00:08:41
    • 15 - La directive v-for 00:13:08
    • 16 - Arguments dynamiques 00:06:45
    • 17 - Directive v-for pour parcourir des objets JSON 00:03:42
    • 18 - Gestion des évènements clavier 00:05:25
    • 19 - La directive v-cloak 00:01:58
    • 20 - La directive v-once 00:03:37
    • 21 - Classes conditionnelles 00:13:22
    • 22 - Gestion des styles inline 00:07:55
    • 23 - Afficher du code HTML conditionnellement 00:07:48
    • 24 - Super challenge - Partie 1 00:10:14
    • 25 - Super challenge - Partie 2 00:11:29
    • 26 - Super challenge - Partie 3 00:08:52
  • Les composants Vue.js
    • 27 - Les composants Vue JS - Introduction 00:04:03
    • 28 - Un premier composant local 00:04:13
    • 29 - Ajouter des données dans un composant 00:08:47
    • 30 - Ajouter des méthodes dans un composant 00:03:21
    • 31 - Passer des données aux composants enfants avec des props 00:07:50
    • 32 - Accès à une prop dans le modèle du composant 00:05:37
    • 33 - Passer des données de l'application aux composants enfants 00:04:05
    • 34 - Custom-events - Envoi de messages au parent par un composant avec $emit 00:10:40
    • 35 - Lifecycle Hooks 00:10:22
    • 36 - Organiser une application en hiérarchie de composants 00:11:32
    • 37 - Passer des données à un composant avec des slots 00:05:34
    • 38 - Slots nommés 00:03:45
    • 39 - Slots avec portée (scoped slots) 00:07:09
    • 40 - Filtres 00:11:59
    • 41 - Observateurs (watchers) 00:08:46
    • 42 - Requêtes asynchrones dans un observateur 00:06:11
    • 43 - Animations et transitions en JavaScript 00:06:29
    • 44 - Transitions d'entrée et de sortie avec VueJS 00:07:34
    • 45 - Transitions d'entrée et de sortie non simultanées 00:07:40
    • 46 - Transitions entre éléments 00:07:38
    • 47 - Transitions de listes 00:09:23
    • 48 - Transitions d'entrée et de sortie avec animate.css 00:07:28
    • 49 - Animations en JavaScript 00:12:08
  • Les applications SPA (Single Page Applications)
    • 50 - Création d'une application SPA avec vue-router 00:11:40
    • 51 - Indicateurs de navigation - Vue Router Navigation Guards 00:10:33
    • 52 - Routage – Transition entre les pages 00:06:57
  • L'interface en ligne de commande Vue-Cli
    • 53 - L'interface en ligne de commande Vue-Cli 00:05:18
    • 54 - Architecture de l'application 00:06:18
    • 55 - Création et modification d'une application avec Vue-Cli 00:11:15
    • 56 - Une deuxième application avec Vue-Cli 00:18:26
    • 57 - Fonctions de rendu (Render Functions) 00:06:52
    • 58 - Templates vs render functions & JSX 00:07:26
    • 59 - Composants fonctionnels 00:03:29
    • 60 - Utilisation des paramètres props et context 00:04:37
  • Le gestionnaire d'état Vuex
    • 61 - Le gestionnaire d'état Vuex 00:07:17
    • 62 - Accès aux méthodes du store dans les composants 00:09:41
    • 63 - Accès à l'état du store dans les composants 00:03:40
    • 64 - L'option plugins de Vuex 00:06:53
    • 65 - Alternative à Vuex 00:07:40
    • 66 - Vuex et les formulaires 00:08:59
    • 67 - Validation d'un formulaire dans VueJS 00:16:23
  • Plus loin avec Vue.js
    • 68 - Mixins 00:05:10
    • 69 - Mixin global 00:02:25
    • 70 - Plugins 00:11:20
    • 71 - Directives personnalisées 00:14:30
    • 72 - Rendre son code robuste grâce aux props typées 00:06:54
    • 73 - Développement d'applications mobiles 00:10:03
    • 74 - Le composant Teleport 00:07:37
    • 75 - L'API de composition 00:13:19
    • 76 - Deuxième approche – Utilisation de la fonction reactive() 00:03:05
    • 77 - Troisième approche – Utilisation de la fonction computed() 00:02:36
    • 78 - Quatrième approche – Externalisation du calcul réactif 00:03:26
    • 79 - Vue 3 et TypeScript 00:13:42



Formateur : Mediaforma

Mediaforma a publié 121 tutoriels et obtenu une note moyenne de 4,1/5 sur 13 899 tutoriels vendus. Voir les autres formations de Mediaforma

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Vue.js 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1381 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données