# Навешивание обработчиков событий в 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>`

Сделайте кнопку, по клику на которую алертом будет выводиться текущая дата.

Модифицируйте предыдущую задачу так, чтобы алерт выводился не по клику, а по наведению мышкой.

←→
↑