Навешивание обработчиков событий в 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 выводился не по клику, а по наведению мышкой.