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

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

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

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

 

<div id="app">
	<button v-on:click="counter +=1">Add 1</button>
	<p>{{ counter }}</p>
</div>

new Vue({
	el: "#app",
	data: {
		counter: 0
	}
})

متدنویسی برای کنترل رویداد

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

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

new Vue({
	el: "#app",
	methods: {
		say: function (message){
			alert(message)
		}
	}
})

بعضی وقت ها ما نیاز به دسترسی به Events اصلی 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)
	}
}

Events Modifier

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

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

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

در مثال زیر برای هر یک از این modifier ها یک نمونه قرار دادیم:

// اجرای رویداد کلیک را متوقف خواهد کرد.
<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>

 

امیدوارم از آموزش جلسه هشتم Vue.js لذت برده باشید.

مطالب مشابه