💚 Formation Vue 3
V01 — Mini-projet : Carte de profil
← V01 Cours
MINI-PROJET V01
Carte de profil interactive
Modifie le formulaire — la carte se met à jour en temps réel avec
v-model
et
:style
.
✏️ Personnaliser
Nom complet
Poste / Titre
Bio
Emoji avatar
Couleur de thème
Compétences (séparées par des virgules)
Projets réalisés
Followers
🔄 Réinitialiser
{{ profil.emoji || '👤' }}
{{ profil.nom || 'Votre Nom' }}
{{ profil.poste || 'Votre poste' }}
{{ profil.bio || 'Votre bio apparaîtra ici...' }}
{{ comp.trim() }}
{{ profil.projets || 0 }}
Projets
{{ formatFollowers }}
Followers
{{ listeCompetences.length }}
Skills
⚡ Concepts Vue utilisés ici :
•
v-model
— liaison bidirectionnelle sur tous les inputs
•
:style
— couleurs dynamiques via objet JS
•
:class
— classe conditionnelle (placeholder)
•
v-for
— badges et palette de couleurs
•
computed
— listeCompetences, formatFollowers, couleurs
⬇ Télécharger (.html)