Méthodes et événements v-on

Méthodes et Événements

La propriété methods dans une app Vue est un objet contenant différentes méthodes pouvant être appelées. Ces méthodes peuvent avoir accès aux données contenues dans data via this et les altérer au besoin.

Par exemple, la méthode showActor révélant l'acteur derrière le personnage:

const app = Vue.createApp({ data() { return { firstName: "Willy", lastName: "Wonka", picture: "willy-wonka.jpg" } }, methods: { showActor() { this.firstName = "Timothée"; this.lastName = "Chalamet"; this.picture = "timothee-chalamet.jpg" } } });

Ainsi, lorsque la méthode showActor est appelée, toutes les occurrences de firstName et lastName sont remplacées par Timothée et Chalamet.

v-on: ou @

Pour appeler une méthode, il faut ajouter un événement sur une balise dans l'app.

Par exemple, pour qu'un bouton appelle la méthode showActor():

<div id="app"> Salut { { firstName } } <button v-on:click="showActor()">Révéler l'acteur</button> </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

ou encore la syntaxe courte avec @:

<div id="app"> Salut { { firstName } } <button @click="showActor()">Révéler l'acteur</button> </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.
Event Handling Démo - Poésie de décembre

Démo en classe

Exercices

EXERCICE Vue - Tableau NBA Vous devrez rendre dynamique à l’aide de Vue le tableau indicateur d’un match de la NBA

EXERCICE Vue - Cheese Kanye says Vous devrez mettre à jour la citation de Kanye West via vue.js et un API