جلسه هشتم: کنترل رویدادها در Vue.js

با بررسی جلسه‌ی هفتم این سری از دوره‌های آموزشی به اطلاعات مفیدی درباره دستورهای حلقه پی‌بردیم تا بتوانیم مجموعه‌ای از لیست‌های موردنظر را با یک تکرار و یک دستور به نمایش بگذاریم. در این جلسه قصد داریم شما را با مفهوم رویداد و کنترل کردن رویدادها آشنا کنیم. با ما همراه باشید.

کنترل رویدادها

برای اعلام وضعیت و یا استفاده از رویدادها می‌توان از دستور v-on جهت گوش دادن به رویدادهای DOM و متناسب با آن، انجام یک عمل جاوا اسکریپتی، اقدام کرد. در مثال زیر یک رویداد برای یک دکمه تعریف شده است که با هربار کلیک کردن روی دکمه یک واحد به شمارنده‌ اضافه می‌شود:

<div id="roxoApp">
	<button v-on:click="counter +=1">Add 1</button>
	<p> تعداد کلیک هایی که با فشردن دکمه ی بالا اضافه میشود برابر {{ counter }} است.</p>
</div>

var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		counter: 0
	}
})

خروجی کد بالا را در اینجا مشاهده کنید.

متد کنترل‌ رویداد

همیشه رویدادهایی که به وقوع می‌پیوندند، از دستورهای ساده پیروی نمی‌کنند، گاهی نیاز است عملیات‌های محاسباتی پیچیده روی یک رویداد صورت بگیرد که در این حالت صفت v-on روی یک متد اجرا می‌شود. نمونه زیر را بررسی بفرمایید:

<div id="roxoApp">
	<button v-on:click="greet">Greet</button>
</div>

var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		name: 'Vue.js'
	},
	methods: {
		greet: function (event){
			alert('Hello' + this.name + '!')
			alert(event.target.tagName)
		}
	}
})

خروجی کد بالا را در اینجا مشاهده کنید.

متدها و کنترل‌کننده‌های درون‌خطی

گاهی می‌توان به‌جای ارسال اطلاعات به یک متد، مستقیما از متدها و آرگون‌های توابع آنها درون یک المان استفاده کرد. مثال زیر را با هم بررسی می‌کنیم:

<div id="roxoApp">
	<button v-on:click="say('hi')">Say hi</button>
	<button v-on:click="say('what')">Say hi</button>
</div>

var roxojs = new Vue({
	el: "#roxoApp",
	methods: {
		say: function (message){
			alert(message)
		}
	}
})

برخی مواقع ما نیاز به دسترسی به رویدادهای اصلی DOM داریم. برای اینکار می‌توان این رویدادها را به یک متد خاص تحت عنوان متغییری به نام $event ارسال کرد. نمونه زیر را برای تفهیم بیشتر بررسی می‌کنیم:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

// ...
methods: {
	warn: function(message, event){
		if (event) event.perventDefault()
		alert(message)
	}
}

Modifierهای رویدادها

فراخوانی دستورهایی مانند event.preventDefault() یا event.stopPropagation() درون یک کنترل‌کننده رویداد، ضروری است. هرچند این دستورها را می‌توان درون متدها اجرا کرد اما بهترین روش این است که اگر نیاز به منطق محاسباتی پیچیده بود از متدها استفاده کرد. برای حل این مسئله، Vue مفهوم مودیفایرهای رویدادها را برای دستور v-on مطرح کرده است. فراخوانی این Modifierها با استفاده از پیشوندهای زیر و با علامت دات (.) مشخص می‌شود.

این مودیفایرها به صورت زیر می‌باشد:

• .stop
• .prevent
• .capture
• .self

در مثال زیر برای هر یک از این مودیفایرها یک نمونه قرار داده شده است:

// اجرای رویداد کلیک را متوقف خواهد کرد.
<a v-on:click.stop="doThis"></a>

// رویداد دکمه ثبت برای یک فرم از یک مدت زمان مشخص طولانی تر نخواهد شد
<form v-on:submit.prevent="onSubmit"></form>

// مودیفایرها میتوانند به صورت زنجیره ای به هم متصل شوند
<a v-on:click.stop.prevent="doThis"></a>

// فقط یک مودیفایر خاص
<form v-on:submit.prevent></form>

// استفاده کردن از مود capture هنگام کلیک کردن
<div v-on:click.capture="doThis">...</div>

//  تنها زمانیکه event.target به عنوان یک رویداد هست 
<div v-on:click.self="doThat">...</div>

key در مودیفایرها

هنگامیکه یک رویداد از روی صفحه کلید اتفاق می‌افتد، نیاز به چک کردن دستور از روی key مورد نظر است. بنابراین Vue.js نیز با اضافه کردن مودیفایر key به دستور v-on این موضوع را تحت پوشش قرار می‌دهد. در مثال زیر هرگاه کد صفحه کلید برابر با 13 بود و کلید فشرده شد متد submit فراخوانی می‌شود:

<input v-on:keyup.13="submit">

در نظر داریم که نوشتن کدهای عددی گاها خسته‌کننده است، بنابراین Vue.js برای سهولت، از اسامی صفحه کلید‌ها در دستورهای خود استفاده کرده است. به مثال زیر توجه کنید:

<input v-on:keyup.enter="submit">

//اختصار در کد فوق
<input @keyup.enter="submit">

در ادامه فهرستی از اسامی رایج در استفاده از کلید‌های کیبورد را در اختیار شما قرار می‌دهیم:

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

همچنین شما می‌توانید برای کلیدهای دلخواه خود نامی مستعار تعیین کنید. این کار با استفاده از شیء گلوبال (global) با ساختار config.keyCodes می‌باشد:

// عبارت زیر دستور ذیل را فعال می‌کند
// v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

مودیفایر رویدادهای ماوس

همچنین می‌توان از رویدادهای دکمه‌های کلیدی موس در برنامه‌ی خود بهره ببرید. بنابراین با فشردن کلید‌های زیر می‌توانید رویدادهایی با مودیفایر متفاوت تولید کنید:

• .ctrl
• .alt
• .shift
• .meta

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.