Vueでのイベントハンドラの設定

それでは、何らかのイベントを契機にメソッドを実行してみましょう。 DOM要素にイベントを設定するには、ディレクティブ v-onを使用する必要があります。

このディレクティブでは、コロンの後にイベント名を指定し、値として、そのイベント発生時に呼び出されるメソッド名を指定します。

実際に試してみましょう。以下のメソッドがあるとします：

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

以下のボタンがあるとします：

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

このボタンをクリックしたときにメソッド showが呼び出されるようにしましょう：

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

通常、v-onの短縮形が使用されます。それは、イベント名の前に記号@を置くものです：

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

alertで現在の日付が表示されるボタンを作成してください。

前の課題を変更し、クリックではなくマウスオーバーで alertが表示されるようにしてください。