$ 85.00

Tuto Vue.js 2 - Formation complète avec Vue-JS

$ 85.00

  • Une formation vidéo de 9h14m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Cette formation vidéo a été conçue pour les développeurs JavaScript qui veulent apprendre à utiliser le framework Vue.js version 2. 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.

Comment vous utiliserez Vue.js :

  • Créer des interfaces utilisateur réactives from scratch (en partant d'une page blanche).
  • Ajouter des fonctionnalités à un projet Web existant.
  • Créer des applications Web SPA (monopage).
  • Créer des applications pour mobiles (Android et iOS).

Aujourd'hui, Vue.js est un framework très populaire. Certainement car il est simple à mettre en place, qu'il offre de très bonnes performances 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 vidéo, 2 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.

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, etc. etc.. 

De très nombreux exercices vous sont proposés.
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 proposée.

Dans cette formation Vuejs très complète :

Voici quelques-uns des sujets abordés :

  • Programmation standard de la vue et du ViewModel (methods, computed, data binding, binding bidirectionnel, directives (v-model, v-bind, v-html, v-for, v-cloak, v-once, v-if et de nombreuses autres).
  • Composants locaux et globaux, communication entre les composants et le ViewModel, hiérarchisation d'une application à l'aide de composants, slots, filtres, watchers, transitions et animations.
  • Applications SPA (routage, navigation guards).
  • Interface en ligne de commande Vue-Cli (création d'applications, render methods, JSX, composants fonctionnels).
  • Gestionnaire d'état Vuex, Vue.observable(), plugins.
  • Mixins, directives personnalisées, NuxtJS, applications mobiles.

Tous les codes sources de la formation sont disponibles.

Et un manuel au format PDF vient en complément des vidéos. Il reprend l'intégralité de la formation: explication des nouveaux concepts, énoncé des exercices et corrigés. Un QCM de fin vous permettra également de valider vos connaissances en VueJs. Je reste disponible via le salon d'entraide pour répondre à vos éventuelles questions.

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 (durée : 9h14m)

  • Premiers pas avec Vue.js
    • 1 - Principes clés de Vue.js gratuit 00:01:49
    • 2 - Préparation de l'environnement de développement gratuit 00:06:17
    • 3 - Le modèle MVVM de Vue.js gratuit 00:02:03
    • 4 - Un premier projet Vue.js gratuit 00:03:20
    • 5 - Un deuxième projet Vue.js 00:02:42
    • 6 - Votre premier exercice 00:02:40
    • 7 - Propriétés calculées 00:03:49
    • 8 - computed vs methods 00:01:19
    • 9 - Data binding gratuit 00:04:40
    • 10 - Nœud texte 00:07:20
    • 11 - Une horloge au forma hh:mm:ss 00:05:27
    • 12 - Installer Vue.js Devtools dans Chrome 00:01:49
    • 13 - Binding bidirectionnel 00:08:13
    • 14 - Utilisation conjointe des directives v-model et v-bind 00:05:38
    • 15 - Un tableau dans le modèle 00:05:01
    • 16 - La directive v-html 00:05:59
    • 17 - Gestion évènementielle 00:03:26
    • 18 - La propriété methods du ViewModel 00:03:34
    • 19 - Fonctions événementielles avec arguments 00:02:05
    • 20 - L'objet $event dans la gestion évènementielle 00:05:32
    • 21 - Les fonctions preventDefault() et stopPropagation() de l'objet $event 00:08:57
    • 22 - Suffixes stop et prevent de Vue 00:07:33
    • 23 - Ajout de données dans un tableau du Model 00:05:19
    • 24 - Affichage des langages dans une liste à puces 00:07:12
    • 25 - Arguments dynamiques 00:07:50
    • 26 - Directive v-for pour parcourir des objets JSON 00:04:29
    • 27 - Gestion des évènements clavier 00:05:10
    • 28 - La directive v-cloak 00:01:30
    • 29 - La directive v-once 00:03:41
    • 30 - Classes conditionnelles 00:08:38
    • 31 - Affecter plusieurs classes à un élément 00:06:07
    • 32 - Gestion des styles inline 00:08:26
    • 33 - Afficher du code HTML conditionnellement 00:10:19
  • Les composants Vue.js
    • 34 - Un premier composant global gratuit 00:04:38
    • 35 - Un premier composant local 00:03:12
    • 36 - Ajouter des données dans un composant 00:07:10
    • 37 - Ajouter des méthodes dans un composant 00:03:12
    • 38 - Passer des données aux composants enfants avec des props 00:06:09
    • 39 - Accès à une prop dans la propriété data du modèle 00:05:26
    • 40 - Passer des données de la Vue aux composants enfants 00:02:56
    • 41 - Local vs global 00:01:29
    • 42 - Custom-events - Envoi de messages au parent par un composant avec $emit 00:09:30
    • 43 - Lifecycle Hooks 00:11:38
    • 44 - Hiérarchie de composants locaux 00:09:38
    • 45 - Hiérarchie de composants globaux 00:02:20
    • 46 - Passer des données à un composant avec des slots 00:06:28
    • 47 - Slots nommés 00:01:56
    • 48 - Slots avec portée (scoped slots) 00:07:26
    • 49 - Filtres 00:09:33
    • 50 - Propriétés calculées (computed properties) 00:10:45
    • 51 - Observateurs (watchers) 00:09:49
    • 52 - Requêtes asynchrones dans un observateur 00:00:00
    • 53 - Animations et transitions 00:06:46
    • 54 - Transitions d'entrée et de sortie avec VueJS 00:07:47
    • 55 - Transitions et affichage conditionnel 00:06:56
    • 56 - Transitions d'entrée et de sortie non simultanées 00:08:14
    • 57 - Transitions entre éléments 00:06:00
    • 58 - Transitions de listes 00:09:09
    • 59 - Transitions d'entrée et de sortie avec animate.css 00:05:59
    • 60 - Animations en JavaScript 00:11:36
  • Les applications SPA (Single Page Applications)
    • 61 - Création d'une application SPA avec vue-router 00:14:38
    • 62 - Allure du lien actif 00:03:23
    • 63 - Indicateurs de navigation - Vue Router Navigation Guards 00:04:58
    • 64 - Indicateurs de navigation par route 00:01:15
    • 65 - Routage – Transition entre les pages 00:05:29
  • L'interface en ligne de commande Vue-Cli
    • 66 - L'interface en ligne de commande Vue-Cli 00:05:10
    • 67 - Architecture de l'application 00:05:13
    • 68 - Création et modification d'une application avec Vue-Cli 00:12:19
    • 69 - Une deuxième application avec Vue-Cli 00:10:47
    • 70 - Fonctions de rendu (Render Methods) 00:05:48
    • 71 - Templates vs render functions & JSX 00:05:34
    • 72 - Vue-Cli et JSX 00:10:02
    • 73 - Composants fonctionnels 00:03:10
    • 74 - Plusieurs paramètres dans la fonction render() 00:02:11
    • 75 - Transmission des évènements dans un composant fonctionnel 00:04:17
  • Le gestionnaire d'état Vuex
    • 76 - Le gestionnaire d'état Vuex 00:07:53
    • 77 - Accès aux méthodes du store dans les composants 00:08:41
    • 78 - Accès à l'état du store dans les composants 00:02:05
    • 79 - L'option plugins de Vuex 00:03:02
    • 80 - Alternative à Vuex 00:07:50
    • 81 - Vuex et les formulaires 00:09:40
    • 82 - Validation d'un formulaire dans VueJS 00:17:17
  • Plus loin avec Vue.js
    • 83 - Mixins 00:04:41
    • 84 - Mixin global gratuit 00:04:05
    • 85 - Plugins 00:10:28
    • 86 - Directives personnalisées – Un premier exemple 00:04:38
    • 87 - Directive personnalisée avec arguments 00:06:16
    • 88 - Rendre son code robuste grâce aux Props typées 00:04:50
    • 89 - NuxtJS 00:10:39
    • 90 - Développement d'applications mobiles 00:09:51
    • 91 - Développement dans Visual Studio Code 00:05:04



Formateur : Mediaforma

Mediaforma a publié 118 tutoriels et obtenu une note moyenne de 4,0/5 sur 13 102 tutoriels vendus. Voir les autres formations de Mediaforma

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Vue.js
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le fichier ZIP contient tous les sources des exemples et des exercices. Les numéros des sources correspondent à ceux des vidéos.
accédez à plus de 1161 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données