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



visibility  
mode_comment   ۱۱

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

info توجه

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

ثبت نام در دوره VueJS 2.0

comment دیدگاه کاربران
مجید زارعی هوشیار

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

محمد نجاری

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

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

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

foamiran foamiran

با تشکر

Mr abbas

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

محمد نجاری

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

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

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

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

موفق باشید.

Hossein

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

محمد نجاری

سلام حسین عزیز . . .
۱−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 کردن تون رو داینامیک کنید وبا هر رویدادی که دوست داشتید میتونید عوضش کنید.

موفق باشد . . .

Hossein

سپاسگزارم🌷

متین خلیلی

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

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

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

ارسال نظرات

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