Boutons Vue.js et mise à jour de valeur

Introduction

Dans ce projet, vous allez apprendre à configurer un environnement Vue.js et à implémenter la fonctionnalité des boutons pour mettre à jour une valeur affichée sur une page web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer un environnement Vue.js
• Comment implémenter la fonctionnalité des boutons - et + pour mettre à jour la valeur
• Comment tester la fonctionnalité des boutons

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer une application Vue.js de base
• Créer un objet de données réactif et mettre à jour ses valeurs
• Utiliser des gestionnaires d'événements pour appeler des fonctions et mettre à jour l'interface utilisateur

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
│   └── style.css
├── index.html
└── js

Dans lequel :

• index.html est la page principale à modifier.
• css est le dossier qui stocke les styles du projet.
• js est le fichier Vue dont le projet dépend.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page. Cliquez sur les boutons - et + de la page et vous constaterez que la valeur au milieu ne peut pas être modifiée. L'effet de la page est le suivant :

Fonction de correction

Dans cette étape, vous devez corriger le bogue de sorte que, en cliquant sur les boutons "-" et "+" de la page, les valeurs au centre changent en conséquence.

1. Dans le fichier index.html, localisez la section // TODO :
2. Modifiez-la pour obtenir le code suivant :

// TODO
let { value } = toRefs(data);

3. Dans les gestionnaires d'événements @click des boutons "-" et "+", appelez la fonction update et passez la valeur mise à jour en tant qu'argument.
4. Dans la fonction update, mettez à jour la propriété value avec la nouvelle valeur passée en tant qu'argument.

Après avoir effectué ces étapes, cliquez sur les boutons "-" et "+" de la page et les valeurs au centre changent en conséquence.

L'effet après la réalisation est le suivant :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.