- L'objectif des TPs est de commencer à intégrer les notions vuejs abordées en cours, sans pour autant aller plus loin.
- Au terme de ce TP, on doit s'apercevoir que les directives vue en cours simplifient un peu l'écriture du HTML, mais pas tant que ça.
- Ce sera pendant les cours suivants que l'on abordera d'autres directives qui montreront toute la puissance de vuejs, et ce qu'il permet d'économiser en terme de code JS
Exercice 1 - affichage dynamisé
- Comme vu en cours, créez un fichier index.js permettant "d'observer" un personnage.
- Dans le TP 1, le tableau players contient deux instances de Perso. Vous pouvez donc créer dans la partie data de l'application vue, un attribut qui observer l'un des deux perso. Par exemple;
1 2 3 4 5 6 |
var app = new Vue({ el: '#mydiv', data: { perso : players[0] } }) |
- Grâce à cette application très basique, on va pouvoir :
- utiliser perso pour afficher des valeurs dans le HTML (grâce aux {{ }} ou bien v-bind:value)
- profiter du rafraichissement automatique fournit par vuejs lorsque le contenu de perso (ou de players[0]) change.
- Comme vue en cours, modifiez shop.html afin d'inclure :
- dans <head>, le package vuejs
- à la fin de <body>, votre fichier index.js.
- Ensuite, modifiez le code HTML pour que tout le texte affiché provienne de perso.
- Pour voir si tout fonctionne bien, ouvrez l'inspecteur et dans la console, tapez : app.perso = players[1]. Les informations devraient changer automatiquement.
Exercice 2 - gestion d'événements
- ATTENTION ! Ce qui est décrit ci-dessous modifie partiellement l'exercice "3 - gestion d'événements" du TP 1.
- Modifiez shop.html pour que la page affiche en plus du tableau résumant l'aventurier :
- un label + un champ de saisie en lecture seule indiquant combien d'or possède actuellement le personnage.
- une liste de 3 noms d'items précédés par un bouton radio + un bouton "Buy". Prenez par exemple items[4], items[20] et items[33]. Le premier bouton doit être sélectionné par défaut.
- un label + un champ de saisie en lecture seule indiquant le prix de l'item sélectionné (donc de chosenItem cf. ci-dessous)
- Vous devez avoir un affichage du type :
Toto, level 1, life = 50, strength = 20
| head | |
| body | |
| hands | |
| belt | |
| bag |
- Dans la partie data de l'application vuejs, ajoutez un attribut chosenItem, qui par défaut observe le premier item (items[4] dans mon exemple) :
1 2 3 4 |
data: { perso : players[0], chosenItem : items[4] } |
- Dans model.js écrivez une fonction getSelectedItem() qui retourne l'instance d'item qui correspond au bouton radio coché.
- Pour cela, il suffit de récupérer l'élément du DOM correspondant à chaque bouton radio (cf. document.getElementById() du cours 1), et ensuite de tester lequel à un attribut checked qui vaut true.
- Début de solution possible, en tenant compte du fait que le premier bouton à pour id="radio1" :
1 2 3 4 5 |
function getSelectedItem() { let r1 = document.getElementById("radio1"); if (r1.checked) return items[4]; // change id 4 by what you chose ... } |
- Modifiez la méthode buy() de la classe Perso, pour que :
- si le perso n'a pas assez d'or, un message d'alerte (cf. fonction javascript alert() ) s'affiche.
- si le perso a assez d'or, une fenêtre de confirmation apparaît, permet d'accepter ou annuler l'achat (cf. fonction confirm() )
- si l'achat est confirmé, on met l'item dans le slot bag du perso (NB: on ne tient pour l'instant pas compte des limites & contraintes de type)
- Modifiez le code de shop.html pour que :
- lorsque l'on clique sur un des boutons radio, on change la valeur de chosenItem avec l'item sélectionné (cf. attribut onclick de <input>). Cela doit provoquer la mise à jour du champ de saisie Prix.
- lorsque l'on clique sur Buy, on doit 1) récupérer l'item choisi (cf. getSelectedItem() ), puis 2) appeler la méthode buy() écrite au TP 1.
- Pour vérifier que tout est bien dynamique, vous pouvez dans la console changer de perso (app.perso = players[1]), ou changer le montat d'or (app.perso.gold = ...), ou encore le prix des articles (items[4] = ..., app.chosenItem.price = ...).