Anexando manipuladores de eventos em Vue

Agora vamos acionar nosso método através de algum evento. Para anexar um evento a um elemento DOM, é necessário usar a diretiva v-on.

Nesta diretiva, após os dois pontos, deve-se especificar o nome do evento, e o valor - o nome do método que deve ser chamado quando o evento ocorrer.

Vamos tentar na prática. Suponha que temos o seguinte método:

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

Suponha que temos o seguinte botão:

<template>
	<button>texto</button>
</template>

Vamos fazer com que ao clicar neste botão, o método show seja chamado:

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

Geralmente, todos usam a versão abreviada de v-on. Ela é representada pelo símbolo @ antes do nome do evento:

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

Crie um botão que, ao ser clicado, exiba a data atual através de um alert.

Modifique a tarefa anterior para que o alert seja exibido não no clique, mas ao passar o mouse sobre o botão.