Développer avec des composants

Introduction

Vous devez maintenant être en mesure d’avoir un projet Vue.js créé et correctement configuré. Nous allons dans ce chapitre voir comment créer des composants Vue.js avec un faible niveau d’interaction, simplement capable de récupérer des données, d’une API par exemple, et de les afficher sur notre site.

Pour nous appuyer dans cette démarche, nous prendrons l’exemple de la création d’une application aidant à la gestion d’un chenil pour chien. Pour ce projet, nous souhaitons obtenir une application dans laquelle nous aurions une mosaïque de blocs présentant les différents chiens actuellement dans notre chenil. Pour chaque chien, nous aimerions avoir un bloc affichant une photo, le prénom et la race du chien. Toutes ces informations sont déjà disponibles sur un serveur. Notre application pourra donc récupérer ces informations via une requête à une API.

A la fin de cette partie, vous devriez être en mesure de créer une application similaire, grâce au concept de composant, de props, de méthode et d’attribut de composant, de directive, de DOM virtuel et de cycle de vie que nous allons aborder.

Bilan

Vous savez désormais créer une application Vue.js avec un faible niveau d’interaction avec l’utilisateur.

Dans la prochaine partie, nous reprendrons notre projet pour voir notamment les différentes manières de rendre notre site plus interactif et capable d’effectuer des transformations de données capables d’impacter dynamiquement notre interface.