Attaching Event Handlers in Vue

Now let's run our method on some event. In order to attach an event to some DOM element, you need to use the v-on directive.

In this directive, after the colon, you must specify the name of the event, and the value is the name of the method that must be called when this event occurs.

Let's try it in practice. Let's say we have the following method:

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

Let's say we have the following button:

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

Let's make it so that when we click on this button, the show method is called:

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

Usually, everyone uses the shortened version v-on. It is represented by the symbol @ before the event name:

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

Make a button that, when clicked, will display the current date via alert.

Modify the previous task so that alert is displayed not on click, but on mouse hover.