Dodawanie obsługi zdarzeń w Vue

Teraz uruchommy naszą metodę na podstawie jakiegoś zdarzenia. Aby dodać zdarzenie do jakiegoś elementu DOM, należy użyć dyrektywy v-on.

W tej dyrektywie po dwukropku należy podać nazwę zdarzenia, a wartością - nazwę metody, którą należy wywołać po wystąpieniu tego zdarzenia.

Spróbujmy w praktyce. Załóżmy, że mamy następującą metodę:

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

Załóżmy, że mamy następujący przycisk:

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

Zróbmy tak, aby po kliknięciu na ten przycisk wywołała się metoda show:

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

Zwykle wszyscy używają skróconej wersji v-on. Reprezentuje ona symbol @ przed nazwą zdarzenia:

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

Stwórz przycisk, po kliknięciu którego przez alert zostanie wyświetlona aktualna data.

Zmodyfikuj poprzednie zadanie tak, aby alert wyświetlał się nie po kliknięciu, a po najechaniu myszką.