قدرت Vue با انواع Modifierها

Impact of Modifiers on Vue Power

0
31
Vue.JS 2: قدرت Vue با انواع modifier ها

فهرست محتوای این مقاله

Event Modiferها

زمانی که با eventها کار می کنیم معمولا با مسائل ریزی روبرو می شویم که برایمان مشکل ساز هستند اما فریم ورک Vue راه حل بسیار خوبی برای آن ها است. کدهای جلسه قبل را به خاطر دارید؟ در جلسه قبل کدی نوشتیم که با حرکت موس روی یک پاراگراف، مختصات موس را به صورت عدد های x و y دریافت می کردیم. حالا تصور کنید قسمتی درون این پاراگراف وجود داشته باشد که نخواهم با حرکت موس روی آن هیچ مختصاتی دریافت کنم. بر همین اساس کدهای HTML را بدین شکل تغییر می دهم:

یعنی اگر موس ما روی span رفت، نمی خواهم هیچ مختصاتی دریافت کنم (DEAD SPOT به معنی «ناحیه مُرده» است). البته از آنجایی که هنوز هیچ کد جاوا اسکریپتی را برای این کار ننوشته ایم، با حرکت موس روی DEAD SPOT باز هم مختصات را دریافت می کنیم. چرا؟ به دلیل اینکه تگ Span درون تگ p است بنابراین جزئی از آن است و Event روی آن نیز اعمال می شود. بنابراین باید برای این Span یک event جداگانه تعریف کنیم:

من می خواهم هنگام حرکت موس روی span هیچ اتفاقی نیفتد بنابراین event آن هم باید کاری نکند، اما نمی توانیم قسمت تابع و کدهای event را خالی بگذاریم بنابراین یک تابع به نام dummy را به آن پاس داده ام. حالا می توانیم در قسمت کدهای جاوا اسکریپت این متد را به شکل زیر تعریف کنیم:

ما در این تابع event را دریافت کرده و سپس propagation را در آن غیرفعال می کنیم. با این کار مطمئن می شویم که کد تعیین شده ما به عناصر بالاتر (مثل تگ p) سرایت نمی کند. مبحث معروف event propagation یک مبحث عادی در جاوا اسکریپت است که باید با آن آشنا باشید و اختصاصی به Vue ندارد. به طور خلاصه آن را به شما یادآوری می کنم: عناصر در HTML یکدیگر را نمی پوشانند بنابراین اگر event ای را روی یک عنصر تعیین کنیم و آن را اجرا کنیم، این Event تا بالاترین سطح اجرا خواهد شد. بنابراین اگر در کد بالا از propagation جلوگیری نکنیم، کد ما برای تمام سطوح بالاتر مانند تگ p نیز اجرا می شود. برای اطلاعات بیشتر در این مورد عبارت javascript event propagation را جست و جو کنید.

حالا اگر کد بالا را اجرا کنید، مشکل ما حل شده است و با بردن موس روی DEAD SPOT آپدیت شدن مختصات متوقف می شود. این راه حل یک راه حل جاوا اسکریپتی ساده بود اما با استفاده از Vue می توانیم کار خودمان را ساده تر از این حالت انجام بدهیم. ابتدا کل تعریف تابع dummy را از قسمت کدهای جاوا اسکریپت حذف کنید. به جای آن در قسمت HTML از یک event modifier (ویرایشگر رویداد) به نام stop استفاده می کنیم:

Event modifier های مختلفی در Vue وجود دارد که به وقتش با آن ها آشنا می شویم (مثلا prevent کار preventDefault را انجام می دهد) اما فعلا بدانید که stop از propagation یک رویداد جلوگیری می کند. همچنین برای قسمت تابع در این event هیچ تابع یا کدی را مشخص نکرده ام (dummy را حذف کرده ایم) که یعنی این event هیچ کاری نخواهد کرد. حالا اگر کد بالا را اجرا کنید، دقیقا همان نتیجه قبلی را خواهیم داشت.

در ضمن شما می توانید event modifier ها را به هم chain (زنجیره کردن) کنید. به طور مثال:

البته در پروژه ما preventDefault کردن، کار خاصی انجام نمی دهد اما نکته اینجاست که بدانید می توان event modifier ها را به هم chain کرد.

Key Modifierها

ما نه تنها event modifier داریم بلکه خصوصیت دیگری به نام key modifier نیز داریم. برای اینکه متوجه بشوید یک فیلد input در کدهای HTML خودم قرار می دهم:

Keyup یک رویداد ساده جاوا اسکریپتی است که زمان فعال شدنش برابر با زمانی است که کاربر دکمه ای را روی کیبورد رها می کند. در کد بالا با هر بار رها شدن یک کلید، تابعی به نام alertMe اجرا خواهد شد. تعریف این تابع نیز بسیار ساده است و فقط یک alert را اجرا می کند:

با اجرای این کد در مرورگر، هر زمان که درون فیلد input چیزی بنویسید یک پنجره alert برایتان باز می شود. حالا فرض کنید بخواهیم کاری کنیم که فقط با زدن کلید Enter پنجره alert را ببینیم. برای این کار از یک key modifier استفاده می کنیم:

از این به بعد alert ما فقط زمانی نمایش داده می شود که دکمه enter را بزنیم. البته شما می توانید key modifier ها را نیز به هم chain کنید. مثلا:

کد بالا یعنی اگر کلید Enter یا کلید Space روی کیبورد فشرده و رها شود (هر کدام باشد فرقی نمی کند) تابع alertMe اجرا خواهد شد. شما می توانید لیست کاملی از event modifier ها و key modifier ها را از documentation رسمی فریم ورک Vue به آدرس زیر دریافت کنید:

https://vuejs.org/v2/guide/events.html#Event-Modifiers

نکته پایانی: همیشه یادتان باشد که حتما نیازی به اجرای تابع خاصی در این قسمت ها نیست. هر جایی که  می توانید با آن به نمونه شیء Vue خود دسترسی داشته باشید (مثلا درون {{}} یا مقدار پاس داده شده به Event ها و غیره) می توانید کدهای جاوا اسکریپتی خود را نیز بنویسید. البته دو شرط دارد: بیشتر از یک expression نباشند و همینطور دارای if statement یا حلقه های for و غیره نیز نباشند. به مثال زیر توجه کنید:

کد بالا وظیفه اضافه کردن تعداد counter را داشت. حالا فرض کنید بخواهیم فقط یک واحد به counter اضافه کنیم. در چنین حالتی می گوییم:

یعنی مستقیما می توانیم به counter دسترسی داشته باشیم. همین مسئله را برای String interpolation نیز می توانیم انجام بدهیم:

این کد نیز صحیح است.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید