Préambule

Les démonstrations de ce TD se basent sur les sources disponibles ci-dessous.

vuejs-td4-src.tgz

Attention, seul le répertoire src est dans l'archive. Il faut donc créer un projet avec vue-cli et remplacer son répertoire src.

1°/ Mettre en place un écouteur d'événement : v-on

En JS basique, on met en place un écouteur d'événement sur une balise grâce aux attributs du type onXXX, par exemple onclick. La valeur de cet attribut est généralement du code javascript simple, par exemple un appel à une fonction qui va gérer l'événement. Vuejs propose la directive v-on pour obtenir le même résultat. La différence est que v-on est paramétrable par le type d'événement que l'on veut écouter et que sa valeur est une expression javascript (comme pour les moustaches, v-bind, ...) accédant directement aux données/méthodes (cf. ci-dessous) de l'instance de vue. La syntaxe est : v-on:nom_événement="expression JS" Comme pour v-bind, il existe un raccourci d'écriture : @nom_événement="expression JS"

Remarque : si on met en place une capture d'événement et que ce dernier n'est jamais généré, cela n'a aucun impact sur l'exécution.

Démonstration :

• Copier le fichier TD4Demo1.vue dans TD4Demo.vue
• Lancer npm run serve puis visualiser le résultat dans le navigateur (par ex. http://localhost:8080)
• Montrer le code de TD4Demo1.vue. On constate que v-on capture l'événement clic sur le bouton et appelle doInc() qui modifie la valeur de value.
• Cliquer sur le bouton : la valeur affichée change automatiquement.
• Remplacer v-on: par un @ => ça fonctionne également
• Problème avec v-model : le champ de saisie est considéré comme du texte, même si on tape un nombre. Mettre A dans le champ de saisie et cliquer sur le bouton : un A est ajoutée après la valeur affichée. Normal, on a fait une concaténation de chaîne. La solution à ce problème est donnée dans la section suivante.

2°/ Récupérer l'événement

Il est relativement fréquent que l'écouteur d'événement appelle une fonction prenant en paramètre une valeur tirée du composant ayant généré l'événement. Par exemple, lorsqu'un champ de saisie est validé (événement change), on veut récupérer la valeur de celui-ci pour la donner en paramètre à la fonction qui va traiter l'événement. Pour cela, il faut récupérer l'objet événement. Vuejs met à disposition une variable globale $event, référençant l'objet événement courant. Grâce à cette variable, on a notamment accès au composant cible de l'événement : $event.target. On peut ensuite accéder aux attributs, par exemple pour un champ de saisie : $event.target.value.

Démonstration :

• Copier le fichier TD4Demo2.vue dans TD4Demo.vue
• Lancer npm run serve puis visualiser le résultat dans le navigateur (par ex. http://localhost:8080)
• Montrer le code de TD4Demo2.vue. On constate que l'on utilise pas v-model dans le champ de saisie, mais une capture de l'événement change, qui appelle la fonction checkInc() avec en paramètre la valeur du champ de saisie.