CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3

Créer des Composants Vue.js avec Axios

Retour à la formation
Chapitre 2 Leçon 10
Précédent
Suivant

Apprenez à manipuler les composants locaux et globaux en utilisant Axios pour récupérer des données d'une API REST avec Vue.js.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous allez apprendre à créer des composants locaux et globaux avec Vue.js, et à utiliser la bibliothèque Axios pour accéder à une API REST, en récupérant et affichant des données. Nous allons débuter par la récupération de 10 utilisateurs aléatoires à partir de l'API randomuser.me. Ensuite, nous diviserons l'interface en composants pour structurer le code, en utilisant un composant local appelé '1' pour afficher les détails de chaque utilisateur, et un autre appelé 'Tous' pour montrer les 10 utilisateurs en boucle.

Ensuite, vous aurez l'opportunité de transformer ces composants locaux en composants globaux pour une réutilisabilité optimisée dans d'autres parties de l'application. Cette leçon offre une vue pratique et détaillée sur la manière de structurer les applications Vue.js et de gérer les composants de manière efficace.

Objectifs de cette leçon

L'objectif de cette vidéo est de vous enseigner comment :

  • Utiliser des composants locaux et globaux dans Vue.js.
  • Récupérer et manipuler des données à partir d'une API REST à l'aide d'Axios.
  • Structurer une application Vue.js de manière modulaire et efficace.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en :

  • HTML, CSS, et JavaScript.
  • Fonctionnement général des frameworks Vue.js.
  • Principes de base de la consommation d'API REST.

Métiers concernés

Les compétences et connaissances abordées dans cette vidéo sont applicables aux métiers suivants :

  • Développeur Front-end.
  • Développeur Full Stack.
  • Ingénieur Logiciel.
  • Développeur Web.

Alternatives et ressources

En termes d'alternatives pour cette vidéo, vous pouvez explorer :

  • Fetch API pour récupérer des données en JavaScript pur.
  • React ou Angular comme frameworks alternatifs à Vue.js.
  • GraphQL comme une alternative pour les APIs REST.

Questions & Réponses

Un composant global dans Vue.js est un composant enregistré dans l'application Vue principale et peut être utilisé dans n'importe quel composant de l'application sans avoir besoin de l'importer ou de le déclarer localement.
Axios est utilisé pour effectuer des requêtes HTTP vers une API REST, permettant ainsi de récupérer des données, comme les informations des utilisateurs dans l'exemple, à utiliser dans l'application Vue.js.
Pour transformer un composant local en composant global, on déplace la définition du composant dans le fichier principal de l'application et l'enregistre via la méthode app.component() de Vue, permettant ainsi son usage global.