Registration

Notions Requises

Énoncé

Transformez l' ex05_class_v2.vue en en faisant un composant nommé Clock.vue lui-même intégré/utilisé dans ex17_basic_comp.vue.

Props

Notions Requises

Énoncé

Créez le composant BasicCard.vue et intégrez-le à ex18_prop01_static.vue sachant que :

• BasicCard.vue est paramétré par name de type String.
• Dans l'exemple ex18_prop01_static, on lui a envoyé la constante 'Goon'.

• Dans l'exemple ex18_prop02_default, on ne lui a rien envoyé.

• Dans l'exemple ex18_prop03_dyn, on lui envoie la valeur entrée dans l'input.
• NB : l'input se trouve dans ex18_prop03_dyn, pas dans BasicCard.

One Way

Notions Requises

Énoncé

L'exercice ex19_one_way est le parent d'un composant fils nommé OneWayTest.

Le parent envoie globalName en paramètre du fils (props name).

Dans l'exemple, globalName et name sont mises dans des input.

Rappel : un composant n'est pas censé modifier la valeur des props qu'il reçoit.
(donc ici name ne devrait pas être dans un input)

On peut constater que si une modification de globalName a bien un effet sur name, la modification de name n'a quant à elle aucun effet sur globalName.

v-for

Énoncé

Le but de ex20_for_comp.vue est de démontrer qu'il est possible d'instancier plusieurs fois un composant.

Dans cet exercice, on crée un composant Country paramétré par country.

Plusieurs instances de Country sont créées dynamiquement en parcourant le tableau fourni par sample_countries.js.

Events

Notions Requises

Énoncé

L'exemple ex21_comp_event utilise le mécanisme d'évènements de composants de vue.

Cet exemple met en oeuvre le (sous-)composant TextInput tel que :

• TextInput demande à l'utilisateur d'entrer une chaine avec une longueur minimale définie par un paramètre min (type Number, valeur par défaut = 10, valeur envoyée ici = 5).
• Le bouton Clear permet de vider l'input.
• Tant que la chaine n'a pas la longueur min, l'input est "rouge", et la chaine ne peut pas être validée.
• Quand la longueur min est atteinte, l'input change de couleur et permet la validation par un appui sur la touche ENTREE. Cette action a pour effet d'envoyer un évènement au parent ex21_comp_event qui met alors à jour son affichage du texte validé.

TP02

Énoncé

Réalisez la page ci-dessous.

Version 2

On va maintenant encapsuler ce qui a été fait en ce début de TP 02 dans un "gros" composant qui possèdera de plus une entête fournie par un nouveau composant nommé Menu.vue.

Slots

Notions Requises

Énoncé

L'exercice ex22_comp_slots.vue à re-créer utilise le composant PostIt qui :

• est paramétré par une props bg qui fournit la couleur d'arrière plan du post-it
• possède 2 slots : le slot par défaut et un slot title permetant d'envoyer le contenu d'un titre pour le post-it (dans l'exemple, le post-it jaune a le titre Courses)

TP 03

Le but de ce TP est de créer une page qui utilise 2 composants spécifiques :

• Un composant nommé Spoiler qui, comme son nom l'indique, permet d'intégrer dans la page des composants qui affichent un bouton spoiler à la place d'un texte spécifique, ce texte n'étant visible qu'une fois qu'on a cliqué sur le bouton correspondant.
• Un composant nommé NavItem qui génère une ancre autour d'un texte : le texte affiché est le contenu de la balise du composant (lors de son insertion) et le lien correspond au paramètre du composant nommé href.

Pour réaliser cette application, vous sont fournis :

• Un fichier nommé template.html qui contient le template de l'application :
  CE FICHIER NE DOIT PAS ÊTRE MODIFIÉ !
• Les images utilisées pour les fonds des entête, contenu et pied de page.

Ces fichiers sont contenus dans l'archive tp03_ressources.zip.

NB: Ce TP est une version Vue du TP Javascript donné ici.

TP04 (Router)

Notions Requises

Énoncé

Ouvrez le TP04 dans une nouvelle fenêtre pour bien voir la barre d'adresse.

Reproduisez le site en utilisant Vue Router et en faisant attention à ce que les affichages correspondent au chemin dans l'adresse affichée.

Vous aurez à nouveau besoin de sample_countries.js.