Exercices Vue

Exercice - Vue

Le but de cet exercice est de créer le champ texte sur le principe de celui utilisé par Twitter. C’est à dire, un simple champ texte, limité à un nombre défini de caractères, un bouton de validation et un bouton d’ajout de photo qui limite encore plus le nombre de caractères.

C’est en fait exactement la même chose que l’exercice de rappels (fait en Plain ou Vanilla JS), mais cette fois-ci en utilisant Vue. Par exemple, pour la mise à jour du nombre de caractères restants, lors de la saisie du message :

• Chargez la librairie Vue
• Créez une nouvelle instance de Vue
  • Stockez les données globales dans data (le texte, le nombre de caractères max)
• Créez une propriété calculée qui calcule le nombre de caractères restants et utilisez cette valeur pour l’affichage
• Utilisez v-model pour mettre à jour la valeur du texte (le nombre de caractères restants devrait se mettre à jour automatiquement)
• Continuez les fonctionnalités de base en suivant ce principe

Enfin, ajoutez une nouvelle fonctionnalité :

• L’utilisateur doit pouvoir tweeter et ses tweets doivent apparaitre sous la tweetbox (la partie serveur n’est pas demandée). Pour cela :
  • Créez une liste de tweets
  • A chaque clic sur le bouton, ajoutez les données du tweet actuel (message, image) dans la liste
  • Générez des blocs HTML basés sur cette liste (utilisation de v-for, v-if)
  • Note: pour les images, utilisez un service de récupération d’image aléatoire comme https://picsum.photos