CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3

Utilisation des Lifecycle Hooks dans Vue.js

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

Apprenez à utiliser les Lifecycle Hooks de Vue.js, en particulier le hook Created, et découvrez comment interagir avec une API REST pour récupérer des utilisateurs aléatoires.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons les Lifecycle Hooks de Vue.js, qui permettent d'exécuter du code à des moments précis du cycle de vie d'un composant. Nous nous concentrons sur le hook Created, qui est invoqué juste après la mise à disposition des données définies dans la propriété data du modèle, mais avant que le composant ne soit attaché au DOM.

Pour illustrer l'utilisation de ce hook, nous allons interagir avec l'API REST RandomUser.me pour récupérer des données utilisateur aléatoires au format JSON. Nous utilisons la bibliothèque Axios pour effectuer une requête XMLHttpRequest et gérer les données renvoyées par cette API. Les étapes incluent l'invocation du CDN d'Axios, la récupération des données dans le hook Created, et l'affichage des données des utilisateurs (photo, prénom, nom, email, téléphone) dans une table HTML.

Cette leçon est conçue comme un guide pratique, complété par des exercices et des démonstrations pour vous permettre de mettre en œuvre rapidement les concepts présentés.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre les Lifecycle Hooks dans Vue.js, avec un focus sur le hook Created.
  • Apprendre à intégrer une API REST tierce, en l'occurrence RandomUser.me, dans une application Vue.js.
  • Utiliser la bibliothèque Axios pour effectuer des requêtes HTTP et gérer les réponses efficacement.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent :

  • Connaissances de base en JavaScript et en Vue.js.
  • Compréhension des concepts de cycle de vie d'un composant Vue.js.

Métiers concernés

Les concepts présentés dans cette vidéo sont pertinents pour :

  • Développeur front-end
  • Développeur web
  • Ingénieur logiciel

Alternatives et ressources

Pour des alternatives à Axios, vous pouvez considérer :

  • Fetch API : Une API native pour effectuer des requêtes HTTP.
  • Superagent : Une petite bibliothèque pour effectuer des requêtes AJAX.

Questions & Réponses

Le hook Created est appelé juste après que le data du modèle est initialisé et avant que le composant ne soit ajouté au DOM. Il permet d'exécuter du code, comme l'appel à une API.
Axios est une bibliothèque basée sur les promesses qui facilite la gestion des requêtes HTTP et des réponses. Elle offre une syntaxe plus simple et des capacités supplémentaires par rapport à Fetch, la méthode native.
Pour chaque utilisateur, inclure la photo (large), le prénom, le nom, l'email et le téléphone. Cela permet de visualiser facilement les informations essentielles récupérées de l'API.