Gắn trình xử lý sự kiện trong Vue

Bây giờ hãy kích hoạt phương thức của chúng ta thông qua một sự kiện nào đó. Để gắn sự kiện vào một phần tử DOM bất kỳ, cần sử dụng chỉ thị v-on.

Trong chỉ thị này, sau dấu hai chấm cần chỉ định tên sự kiện, và giá trị - là tên phương thức cần gọi khi sự kiện đó xảy ra.

Hãy thử thực hành. Giả sử chúng ta có phương thức sau:

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

Giả sử chúng ta có nút bấm sau:

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

Hãy làm sao để khi nhấp chuột vào nút bấm này thì phương thức show được gọi:

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

Thông thường mọi người sử dụng dạng rút gọn của v-on. Nó được biểu thị bằng ký hiệu @ đứng trước tên sự kiện:

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

Tạo một nút bấm sao cho khi nhấp vào nó sẽ hiển thị ngày hiện tại thông qua alert.

Sửa đổi bài toán trước sao cho alert xuất hiện không phải khi nhấp chuột, mà khi di chuột vào.