Vue'de Olay İşleyicileri Ekleme

Şimdi metodumuzu herhangi bir olay ile çalıştıralım. Herhangi bir DOM elemanına bir olay eklemek için, v-on directive'ını kullanmak gerekir.

Bu directive'ta iki noktadan sonra olayın adı belirtilmeli, değer olarak ise, bu olay gerçekleştiğinde çağrılacak metodun adı yazılmalıdır.

Hadi pratikte deneyelim. Aşağıdaki metodumuz olduğunu varsayalım:

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

Aşağıdaki butonumuz olduğunu varsayalım:

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

Bu butona tıklandığında show metodunun çağrılmasını sağlayalım:

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

Genellikle herkes v-on'un kısa versiyonunu kullanır. Bu, olay adının önündeki @ sembolüdür:

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

Tıklandığında alert ile mevcut tarihi gösteren bir buton yapın.

Önceki görevi, alert'ın tıklanma ile değil de, fare ile üzerine gelindiğinde gösterilecek şekilde değiştirin.