Vue - Luchador

Pour cet exercice, vous allez créer une petite démo permettant de déterminer votre nom de luchador en fonction de votre jour et mois de naissance.

Aperçu du résultat 👇

Matériel Pen de départ

Le CSS est déjà réalisé et le cadriciel Vue est déjà installé pour vous dans le pen de départ.

Requis À l'intérieur de l'élément .menu, créez un menu déroulant permettant de choisir la journée de sa naissance allant de 1 à 31. Ce menu doit se populer à partir du tableau daysArr en utilisant une boucle. Toujours à l'intérieur de l'élément .menu, créez cette fois un nouveau menu déroulant permettant de choisir son mois de naissance. Ce menu doit se populer à partir du tableau monthsArr en utilisant aussi une boucle. Lorsque les menus déroulants changent, les données day et month doivent se mettre à jour. Créez une propriété calculée intitulée name. La valeur de cette propriété devra être le résultat de la concaténation de la valeur associée au mois et au jour sélectionnés. 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