Tapahtumankäsittelijöiden liittäminen Vue:ssa

Käynnistetään nyt metodimme jonkin tapahtuman perusteella. Liittääksesi tapahtuman jollekin DOM-elementille, sinun tulee käyttää direktiiviä v-on.

Tässä direktiivissä kaksoispisteen jälkeen tulee määrittää tapahtuman nimi, ja arvoksi - metodin nimi, joka on kutsuttava tapahtuman sattuessa.

Kokeillaan käytännössä. Oletetaan, että meillä on seuraava metodi:

methods: {
	show: function() {
		alert('!');
	}
}

Oletetaan, että meillä on seuraava painike:

<template>
	<button>text</button>
</template>

Tehdään niin, että napsautettaessa tätä painiketta kutsutaan metodia show:

<template>
	<button v-on:click="show">text</button>
</template>

Yleensä kaikki käyttävät lyhennettyä muotoa v-on. Se esitetään symbolilla @ ennen tapahtuman nimeä:

<template>
	<button @click="show">text</button>
</template>

Tee painike, jota napsautettaessa alert-ikkunassa näytetään nykyinen päivämäärä.

Muokkaa edellistä tehtävää niin, että alert-ikkuna ei näy napsautuksesta, vaan kun hiiri viedään painikkeen päälle.