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

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

در این جلسه ابتدا یک نمودار مهم را بررسی میکنیم بعد میریم سراغ آشنایی با 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 کردن تون رو داینامیک کنید وبا هر رویدادی که دوست داشتید میتونید عوضش کنید.

موفق باشد . . .

Mr abbas

سلام خسته نباشید ممنون بابت اموزشها یه انتقاد و یه سوال دارم
طول ویدیوها چون کمه و 2 تا 3 ویدیو در هفته منتشر میشه کلا میشه هفته ای 45 دقیقه تا 1 ساعت
اگه میشه تعداد ویدیو بیشتری در طول هفته بزارید
سوالم اینم ک چرا اتربیوت های ویو جی اس بصورت اتوکامپلیت نمیاره؟هم تو ویژوال کد امتحان کردم هم تو وب استورم مثلا v-on:click
ممنون.

محمد نجاری

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

در مورد سوالتون بله حق با شماست.با اضافه کردن افزونه های ویو جی اس تو هر کدوم تا جاهایی کمک میکند ولی نه خیلی خوب .

من خودم بیشتر چون با php storm کار میکنم اونجا خیلی بهتره ولی بازم خیلی چیز ها رو نمیاره به صورت اتو کمپلیت.

در هر صورت در حال اموزش بهتره از ویرایشگر های ساده مثله vscode یا sublime استفاده کنیدبعدن سراغ IDEها بروید

موفق باشید.

foamiran foamiran

با تشکر

مجید زارعی هوشیار

ممنون از پاسختون
بله مثال هاشو داخل داکیومنت جاوا اسکریپت مشاهده کردم…..همچنین لینکی که دادین..

مجید زارعی هوشیار

سلام و درود خدمت شما استاد عزیز‌….
خسته نباشید خیلی خوب بود…
فقط به سوال داشتم ازتون….با توضیحاتی که دادین و مستندات javascript رو خوندم…capture از root صفحه document شروع میکنه یعنی از تگ html و بعد body سپس فرم و….
ولی bubbling از تگی که رویداد در آن اتفاق افتاده شروع میکنه یعنی برعکس capture. درسته؟
ولی استاد در دقیقه ۹ و ۱۰ ثانیه این جلسه وقتی شما که از capture استفاده کردید قاعدتا باید اول jad و بعد pedar و سپس farzand شروع به نمایش پیغام ها میکرد ولی چرا از farzan به بالا اجرا شد؟یا من اشتباه میکنم؟میشه توضیحی بدید ممنون میشم.

محمد نجاری

سلام …
حقیقت امر capture در پروژه های واقعی بسیار کم و نادر است و صرفا همین که بدونید چیست و چگونه کار میکند .کافیست. اگر به پایین همان داکیومنت تو ویدیو بروید مثال بسیار جالبی زده البته با جاواسکریپت خام و اگرهم مثال بهتری از مبحث capture تو vue js بخواهید ، این لینک رو نگاه بکنید و در alert که نمایش داده میشه به clicked و Triggered توجه داشته باشید.
مثالی برای capture
موفق باشید.

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

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

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

نیاز به لاگین

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