მოვლენების დამმუშავებლების დამატება 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>

გააკეთეთ ღილაკი, რომელზე დაწკაპუნებაზე alert-ის მეშვეობით გამოიტანება მიმდინარე თარიღი.

მოდიფიცირება გაუკეთეთ წინა ამოცანას ისე, რომ alert არ გამოჩნდეს დაწკაპუნებაზე, არამედ მაუსის მიტანისას.