V05 — Exercices Événements & Formulaires

Créez une mini-app Vue avec un compteur. Trois boutons : −, Reset et +. Utilisez @click sur chaque bouton pour modifier la valeur.

Créez un formulaire avec un input et un bouton submit. Utilisez @submit.prevent pour empêcher le rechargement de la page. Affichez un message de confirmation après soumission.

Créez un input de type "todo". L'utilisateur tape un texte et appuie sur Entrée pour l'ajouter à une liste. Utilisez @keyup.enter. Videz l'input après ajout.

Créez une div parent avec @click et un bouton enfant avec @click.stop. Montrez que le clic sur le bouton ne remonte pas au parent. Comptez séparément les clics sur chacun.

Créez un input lié avec v-model à une variable texte. Affichez en temps réel la valeur saisie et le nombre de caractères. Montrez que la liaison est bidirectionnelle.

Créez un mini-formulaire avec au moins : un textarea, des checkboxes groupées (tableau), des radios, et un select. Chacun lié avec v-model. Affichez les valeurs sélectionnées.

Créez un input "Nom" avec validation. Le message d'erreur s'affiche seulement si :
1. L'utilisateur a interagi avec le champ (@blur pour détecter)
2. Le champ est vide ou trop court (moins de 2 caractères)

Créez un champ email avec validation par regex. La regex doit vérifier le format nom@domaine.ext. Affichez un message d'erreur en rouge si invalide, un message vert si valide. Utilisez .trim sur le v-model.

Créez un formulaire de contact avec 3 champs : nom, email, message. Chaque champ a sa propre validation. Désactivez le bouton submit tant que le formulaire est invalide. Affichez les erreurs uniquement après que l'utilisateur a touché le champ.

Formulaire professionnel complet :
- Validation en temps réel (tous les champs)
- Bouton désactivé si invalide ou en cours d'envoi
- Simulation d'envoi asynchrone (setTimeout)
- Affichage d'un panneau de succès après envoi
- Gestion des erreurs serveur (aléatoire 10%)