Méthodes et événements¶
Méthodes¶
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() sera appelée, toutes les occurrences de firstName, lastName et picture seront remplacées par Timothée, Chalamet et timothee-chalamet.jpg.
Gestion d'événement¶
Appeler une méthode avec {{ }}¶
Pour appeler une méthode, on peut simplement utiliser l'interpolation {{ showActor() }}. Ainsi, la méthode sera appelée dès de chargement de la page qui contient {{ showActor() }}.
Ceci sans {{ showActor() }} :
See the Pen DEMO VueJS | Méthodes by TIM Montmorency (@tim-momo) on CodePen.
deviendrait, cela, avec {{ showActor() }} :
See the Pen DEMO VueJS | Méthodes by TIM Montmorency (@tim-momo) on CodePen.
Appeler une méthode avec v-on ou @¶
Il est plus commmun d'appeler une méthode sur un événement, par exemple sur un clic d'un bouton.
Par exemple, voici la façon qu'appelle la méthode showActor() via v-on:click sur la balise <button> :
<div id="app">
Salut {{ firstName }}
<button v-on:click="showActor()">Révéler l'acteur</button>
</div>
ou encore la syntaxe courte avec @click:
<div id="app">
Salut {{ firstName }}
<button @click="showActor()">Révéler l'acteur</button>
</div>
See the Pen DEMO VueJS | Méthodes by TIM Montmorency (@tim-momo) on CodePen.
En savoir plus sur Gestion d'événement - Event Handling
Méthode dynamisée avec des paramètres¶
Il est aussi possible de passer des paramètres à la méthode. Il faut alors modifier la définition de la méthode afin qu'elle soit préparée à recevoir ces paramètres.
Par exemple, nous pourrions envoyer les informatiosn de l'acteur Johnny Depp qui a incarné Willy Wonka en 2005.
See the Pen DEMO VueJS | Méthodes | Johnny by TIM Montmorency (@tim-momo) on CodePen.
Instruction en ligne (inline) avec v-on¶
Avec v-on:click / @click il est aussi possible d'écrire des instructions simples telle qu'une opération mathématique ou une instruction contenant une condition simple.
Opération mathématique¶
data() {
return {
count: 0
}
}
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
Une instruction contenant une condition simple¶
<button @click="willy == 'Timothee' ? () => showActor('Timothée', 'Chalamet', 'timothee-chalamet.jpg') : () => showActor('Johnny', 'Depp', 'johnny-depp2.jpg')">Clique moi</button>
Démo - Poésie de décembre¶
Démo en classe via CodePen