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 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