Gebeurtenisafhandelingen toevoegen in Vue

Laten we nu onze methode uitvoeren bij een gebeurtenis. Om een gebeurtenis aan een DOM-element toe te voegen, moet je de directive v-on gebruiken.

In deze directive moet je na de dubbele punt de naam van de gebeurtenis specificeren, en als waarde - de naam van de methode die moet worden aangeroepen wanneer deze gebeurtenis plaatsvindt.

Laten we het in de praktijk proberen. Stel dat we de volgende methode hebben:

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

Stel dat we de volgende knop hebben:

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

Laten we ervoor zorgen dat bij een klik op deze knop de methode show wordt aangeroepen:

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

Meestal gebruikt men de verkorte versie van v-on. Het is het symbool @ voor de gebeurtenisnaam:

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

Maak een knop waarop, wanneer erop geklikt wordt, via alert de huidige datum wordt weergegeven.

Wijzig de vorige opdracht zo dat de alert niet bij een klik wordt weergegeven, maar bij het hoveren van de muis.