آموزش vue JS : جلسه 6 - آشنایی و کار با Event Modifier

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۲۷ فروردین ۱۳۹۷

در این جلسه ابتدا یک نمودار مهم را بررسی میکنیم بعد میریم سراغ آشنایی با Event Modifier و در آخر یک مثال جالب خواهیم داشت برای درک همه این موارد پس با ما باشید و سوالات و نظرات خود را در زیر همین ویدیو با ما در میان بگذارید.

:: توجه

این مطلب یک جلسه از آموزش حرفه ای vuejs می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش حرفه ای vuejs

نویسنده
کارشناس و فارغ التحصیل مهندسی نرم افزار،برنامه نویس BackEnd سون‌لرن،یک گیک، 5 سال سابقه برنامه‌نویسی فرانت اند و بک اند.مسلط به زبان های Ruby,php,java,javascript و ... . علاقه مند به Clean Code و مقیاس‌پذیری وب

جلسات دوره

نظرات کاربران

متین خلیلی

سلام
ممنون از دوره خوبتون.
یه سوال در رابطه با رویداد ها داشتم…
زمانی که از یه رویداد استفاده می کنیم، حین فرستادن یه مقداری به اون تابع مد نظر، میتونیم یه متغیر ثابتی رو به نام event$ سمت ویو ارسال کنیم.
میخواستم بدونم کار این متغیر چیه دقیقا و همچنین کاربردش به چه صورت هستش.
ممنون.

<button v-on:click="warn(‘Test message’, $event)">
  Submit
</button>
محمد نجاری

سلام . . .
کاربرد این روش رو در قسمتی که درباره کامپوننت های تو در تو و Emait کردن می باشد میتونید ببیند تا متوجه بشوید.$event یک نمونه از Event Object می باشد که تمامی دیتا های مربوط به ایونت اون متد ، کامپوننت و … در آن قرار میگیرد.

Hossein

با سلام و خسته نباشید ، از خدمتتون دو تا سوال دارم.
1- از vue js 2.3.0 به بعد در event modifier ها گزینه ای به نام passive اضافه شده ، لطفا بفرمایید کاراییش چیه؟
2- اگر از سابمیت شدن یک فرم با prevent جلوگیری کنیم ، چه جوری میشه بگیم اگر رو فلان دکمه کلیک شد prevent خنثی بشه؟

Hossein

سپاسگزارم?

محمد نجاری

سلام حسین عزیز . . .
۱−passive event listeners ها خیلی به performance اسکرول کردن کمک میکنن یعنی وقتی یک اسکرول انجام میشه مرورگر یک زمانی رو صبر میکنه تا ببینه ایا یک prevent Default یی کال باید بشه یا نه واین خیلی زمان میگیره از مرورگر passive این مشکل حل کرده. به مثال زیر تو vue توجه کنید و برای تفاوت آن به این ویدیو هم نگاه کنید.


// the scroll event's default behavior (scrolling) will happen
//immediately, instead of waiting for `onScroll` to complete
//in case it contains `event.preventDefault()`

v-on:scroll.passive="onScroll"

۲− ساده ترین روش: ورودی مدل submit کردن تون رو داینامیک کنید وبا هر رویدادی که دوست داشتید میتونید عوضش کنید.

موفق باشد . . .

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل