Vue - Composante - Cartes de produit

Pour cet exercice, vous allez générer 3 cartes produits à l'aide de composantes Vue.

Aperçu du résultat 👇

Matériel Pen de départ Requis Créez une app Vue. Vous allez devoir remplacer le HTML des 3 cartes par une composante card réutilisée 3 fois. Donc, créez une composante card Ensuite, ajoutez un tableau cardsArr dans vos app. Ce tableau contiendra 3 objets qui, chacun, contiendront les 4 données uniques à chaque carte. Dans la view (le HTML), ajouter votre composante <card> une fois. Sur celle-ci, créez une boucle sur cardsArr pour générer les 3 cartes. Utilisez les props pour personnaliser le contenu de chaque carte. Notes de cours 📚

Introduction Vue

Création d'une app VueJS Comment créer en JS la base de l'app Vue

Données {{ }} Les données via les moustache et les attributs des balises via v-bind

Méthodes et événements v-on Les méthodes Vue sont des fonctions qui appartiennent à l'instance Vue sous la propriété "methods".

Conditions v-if Le rendu conditionnel ou autre condition d'affichage

Boucles v-for Boucler sur un tableau d'objets

Éléments de formulaire v-model: une relation entre une donnée et les input, select etc.

Propriétés calculées Faire des expressions de base dans un template Vue