Interagir avec des composants

Introduction

Dans la partie précédente, nous avons vu comment développer des composants pour découper notre interface de façon modulaire, dynamique et intelligente, tout en y injectant différentes données.

Nous avons, à travers les chapitres, réalisé une galerie de blocs présentant des informations sur les chiens d’un chenil, que nous avons récupérées depuis une API . Notre galerie est fonctionnelle, mais assez peu interactive. Des chiens, il y en a beaucoup au chenil. Difficile pour nos utilisateurs de rechercher les informations sur un chien en particulier qu’ils ont vu sur place.

Pour les aider, nous allons leur permettre de trier nos chiens par ordre alphabétique en fonction de leur nom ou de leur race. Nous mettrons également en place un moyen de les rechercher en fonction de leur nom. Enfin, nous verrons comment stocker cette recherche pour que les utilisateurs la retrouvent lors de leurs prochaines visites sur le site.

A la fin de cette partie, vous serez en mesure de faire interagir vos utilisateurs avec vos composants grâce aux directives v-model et v-on, ainsi que l’usage de données calculées et d’observateurs. Vous saurez stocker des données à l’aide de données locales, de session ou de cookies. Vous saurez enfin comment gérer la remontée de données dans vos composants tout en respectant le principe de flux de données unidirectionnel, grâce à l’usage d’évènements personnalisés.

Bilan

Vous savez maintenant interagir avec vos utilisateurs dans vos composants et stocker des données sur un navigateur web.

Nous avons maintenant une galerie aboutie pour la présentation des chiens de notre chenil. Dans la partie suivante, nous aborderons quelques notions complémentaires sur des aspects plus avancés du développement en Vue.js.