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 чыкылдатуу менен эмес, чычканды үстүнө алып келгенде чыгышы керек.