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