Vue.js 2 - Formation complète
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Vue.js 2 - Formation complète

Mediaforma
84,99€
3 paiements de 28,00€ avec Klarna. En savoir plus

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 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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Premiers pas avec Vue.js
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
Plus loin avec Vue.js

Plan détaillé du cours

Chapitre 1 : Premiers pas avec Vue.js
2h47
 
Leçon 11 - Principes clés de Vue.js
Leçon 22 - Préparation de l'environnement de développement
Leçon 33 - Le modèle MVVM de Vue.js
Leçon 44 - Un premier projet Vue.js
Leçon 55 - Un deuxième projet Vue.js
Leçon 66 - Votre premier exercice
Leçon 77 - Propriétés calculées
Leçon 88 - computed vs methods
Leçon 99 - Data binding
Leçon 1010 - Nœud texte
Leçon 1111 - Une horloge au forma hh:mm:ss
Leçon 1212 - Installer Vue.js Devtools dans Chrome
Leçon 1313 - Binding bidirectionnel
Leçon 1414 - Utilisation conjointe des directives v-model et v-bind
Leçon 1515 - Un tableau dans le modèle
Leçon 1616 - La directive v-html
Leçon 1717 - Gestion évènementielle
Leçon 1818 - La propriété methods du ViewModel
Leçon 1919 - Fonctions événementielles avec arguments
Leçon 2020 - L'objet $event dans la gestion évènementielle
Leçon 2121 - Les fonctions preventDefault() et stopPropagation() de l'objet $event
Leçon 2222 - Suffixes stop et prevent de Vue
Leçon 2323 - Ajout de données dans un tableau du Model
Leçon 2424 - Affichage des langages dans une liste à puces
Leçon 2525 - Arguments dynamiques
Leçon 2626 - Directive v-for pour parcourir des objets JSON
Leçon 2727 - Gestion des évènements clavier
Leçon 2828 - La directive v-cloak
Leçon 2929 - La directive v-once
Leçon 3030 - Classes conditionnelles
Leçon 3131 - Affecter plusieurs classes à un élément
Leçon 3232 - Gestion des styles inline
Leçon 3333 - Afficher du code HTML conditionnellement
Chapitre 2 : Les composants Vue.js
2h55
 
Leçon 134 - Un premier composant global
Leçon 235 - Un premier composant local
Leçon 336 - Ajouter des données dans un composant
Leçon 437 - Ajouter des méthodes dans un composant
Leçon 538 - Passer des données aux composants enfants avec des props
Leçon 639 - Accès à une prop dans la propriété data du modèle
Leçon 740 - Passer des données de la Vue aux composants enfants
Leçon 841 - Local vs global
Leçon 942 - Custom-events - Envoi de messages au parent par un composant avec $emit
Leçon 1043 - Lifecycle Hooks
Leçon 1144 - Hiérarchie de composants locaux
Leçon 1245 - Hiérarchie de composants globaux
Leçon 1346 - Passer des données à un composant avec des slots
Leçon 1447 - Slots nommés
Leçon 1548 - Slots avec portée (scoped slots)
Leçon 1649 - Filtres
Leçon 1750 - Propriétés calculées (computed properties)
Leçon 1851 - Observateurs (watchers)
Leçon 1952 - Requêtes asynchrones dans un observateur
Leçon 2053 - Animations et transitions
Leçon 2154 - Transitions d'entrée et de sortie avec VueJS
Leçon 2255 - Transitions et affichage conditionnel
Leçon 2356 - Transitions d'entrée et de sortie non simultanées
Leçon 2457 - Transitions entre éléments
Leçon 2558 - Transitions de listes
Leçon 2659 - Transitions d'entrée et de sortie avec animate.css
Leçon 2760 - Animations en JavaScript
Chapitre 3 : Les applications SPA (Single Page Applications)
29m43
 
Leçon 161 - Création d'une application SPA avec vue-router
Leçon 262 - Allure du lien actif
Leçon 363 - Indicateurs de navigation - Vue Router Navigation Guards
Leçon 464 - Indicateurs de navigation par route
Leçon 565 - Routage – Transition entre les pages
Chapitre 4 : L'interface en ligne de commande Vue-Cli
1h04
 
Leçon 166 - L'interface en ligne de commande Vue-Cli
Leçon 267 - Architecture de l'application
Leçon 368 - Création et modification d'une application avec Vue-Cli
Leçon 469 - Une deuxième application avec Vue-Cli
Leçon 570 - Fonctions de rendu (Render Methods)
Leçon 671 - Templates vs render functions & JSX
Leçon 772 - Vue-Cli et JSX
Leçon 873 - Composants fonctionnels
Leçon 974 - Plusieurs paramètres dans la fonction render()
Leçon 1075 - Transmission des évènements dans un composant fonctionnel
Chapitre 5 : Le gestionnaire d'état Vuex
56m28
 
Leçon 176 - Le gestionnaire d'état Vuex
Leçon 277 - Accès aux méthodes du store dans les composants
Leçon 378 - Accès à l'état du store dans les composants
Leçon 479 - L'option plugins de Vuex
Leçon 580 - Alternative à Vuex
Leçon 681 - Vuex et les formulaires
Leçon 782 - Validation d'un formulaire dans VueJS
Chapitre 6 : Plus loin avec Vue.js
1h32
 
Leçon 183 - Mixins
Leçon 284 - Mixin global
Leçon 385 - Plugins
Leçon 486 - Directives personnalisées – Un premier exemple
Leçon 587 - Directive personnalisée avec arguments
Leçon 688 - Rendre son code robuste grâce aux Props typées
Leçon 789 - NuxtJS
Leçon 890 - Développement d'applications mobiles
Leçon 991 - Développement dans Visual Studio Code

Vos questions sur le cours

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.

Payer plus tard ou en 3x

Prix d'achat : 84,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 28,00 €
tous les mois, sans intérêts
Total : 84,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données