آموزش Vuejs 2 (شامل پروژه های کاربردی)

Vue Js با تلفظ (ویو جی اس) یک فریم ورک شگفت انگیز جاوا اسکریپت است که برای ساخت نرم افزارهای تک صفحه (SPA) در سمت کاربر یا Frontend مورد استفاده قرار می گیرد. به عبارت دیگر می توان گفت Vue Js یک ترکیب فوق العاده بهینه شده از فریم ورک های Angular و React می باشد. با استفاده از فریم ورک های جاوا اسکریپت مانند Vue JS می توان رابط کاربری (UI) بسیار قدرتمندی را ایجاد کرد و با افزایش سطح تجربه کاربری (UX) جایگاه سایت را ارتقاء بخشید. هسته اصلی این فریم ورک روی ظاهر سایت تمرکز دارد و به سادگی با سایر کتابخانه ها هماهنگ می شود. از طرفی الگوی معماری Vue JS به صورت MVVM یا Model View View Model بوده و آنچه که اهمیت بسیار بالایی دارد تنها ظاهر سایت است.

فریم ورک Vue JS توسط آقای Evan You در سال ۲۰۱۴ میلادی (۱۳۹۳ شمسی) وارد دنیای برنامه نویسان شد. آقای You ابتدا عضو تیم برنامه نویسان ارشد شرکت گوگل بود و پس از دستیابی به ایرادهای فریم ورک انگولار جی اس (Angular JS)، رویای دیگری در سر پروراند. سپس از شرکت گوگل استعفاء داد و فریم ورک شخصی خود را تحت عنوان Vue Js 0.11 ایجاد کرد. با روند توسعه و جذب اسپانسرهای متنوع و ارتقاء فریم ورک خود، توانست فریم ورک Vue JS را در مدت زمان کوتاهی، جزو سه فریم ورک برتر جاوا اسکریپت کند. بگونه ای که در حال حاضر Vue JS 2.5 که آخرین نسخه ی آن است، در کشور چین جزو پرکاربردترین فریم ورک ها می باشد. قدرتمندترین اسپانسر فریم ورک Vue JS، فریم ورک قدرتمند لاراول (Laravel) می باشد که در حال حاضر اکثر بخش های وب سایت های زیرمجموعه خود را با این فریم ورک پیاده سازی کرده است. البته این فریم ورک در سایر کشورها مانند ایران نیز محبوبیت بالایی پیدا کرده است. در ایران وب سایت هایی مانند دیجی کالا، زرین پال و ... از این فریم ورک بهره برده اند.

مخاطب اصلی دوره آموزش Vuejs چه کسانی هستند؟

• افرادی که علاقه به یادگیری تولید نرم افزارهای تک صفحه ای یا SPA دارند
• افرادی که دوست دارند به عنوان Frontend کار یا توسعه دهنده وب در سمت کاربر، وارد بازار کار شوند
• افرادی که قصد دارند وب سایت خود را ارتقاء داده و با تجربه کاربری بالا (UX) کاربران بیشتری را جذب کنند
• افرادی که به دنبال ساده ترین راه برای ساخت نرم افزار های تک صفحه ای هستند!
• اگر از انگولار یا ری اکت خوشتان نمی آید، تنها انتخاب شما می تواند Vuejs باشد

پیش نیازهای دوره آموزش Vuejs

• دانش مقدماتی درباره زبان برنامه نویسی جاوا اسکریپت Javascript
• دانش مقدماتی درباره HTML‌ و CSS 

سرفصل های دوره

مقدمه و معرفی

• معرفی مدرس
• معرفی فریم ورک Vuejs 2.0
• تفاوت بین Frontend (سمت کاربر) و Backend (سمت سرور)
• معرفی ویرایشگر برای کار با Vuejs
• نصب و راه اندازی با استفاده از CDN و به صورت دستی
• ساخت اولین نرم افزار با فریم ورک Vuejs

استفاده از Vuejs جهت تعامل با DOM

• معرفی قالب ها
• آموزش نحوه کار کردن نمونه ها
• معرفی سینتکس قالب ها
• دسترسی به داده ها در نمونه‌های Vue
• اتصال داده ها به صفات
• درک مفاهیم دستورات یا Directives
• غیر فعال کردن Re-Rendering با استفاده از دستور v-once
• دستیابی به خروجی خالص (raw) داده های HTML
• کار کردن با رویدادها و گوش کردن به آنها (Listening to Event)
• دریافت داده های Event از طریق شیء Event
• ارسال آرگومن های دلخواه با استفاده از Event
• تصحیح Event با استفاده از Event Modifiers
• گوش دادن به رویدادهای صفحه کلید
• نوشتن کدهای جاوا اسکریپت درون قالب
• استفاده از اتصال داده ای دو طرفه یا Two-way-Binding
• معرفی و استفاده از ویژگی Computed
• معرفی کدهای کوتاه جهت صرفه جویی در زمان کدنویسی
• قرار دادن استایل های CSS پویا با استفاده از کلاس ها
• قرار دادن استایل های CSS پویا با استفاده از اشیاء
• استایل دهی کردن به المان ها با استفاده از سینتکس آرایه ها

دستورهای شرطی و لیست های رندر شده

• معرفی و کار با دستورهای شرطی v-if و v-else-if
• استفاده از صفت v-if
• معرفی و استفاده از دستور v-show
• نمایش لیستی با استفاده از دستور حلقه v-for
• دستیابی به ایندکس فعلی در حلقه v-for
• استفاده از صفت v-for
• ایجاد حلقه هایی از جنس اشیاء (Objects)
• ایجاد حلقه هایی از جنس عدد

اولین پروژه - ایجاد یک بازی نبرد تن به تن با Vuejs

• معرفی بازی و چالش ها
• راه اندازی پروژه بازی از صفر
• ایجاد نمونه Vue و استایل دهی
• نمایش بازیکن ها با شرایط کنترلی
• پیاده سازی یک متن به نام Start Game
• پیاده سازی یک متد به نام Attack
• بهینه سازی کدنویسی با استفاده از Refactoring
• پیاده سازی یک متد جهت حمله بازیکن ها
• پیاده سازی متد Heal
• اعمال دکمه ی پایان بازی
• ساخت یک Action Log
• نمایش Log در یک حلقه با استفاده از v-for
• استایل دادن به Log های نمایشی

معرفی و استفاده از نمونه ی Vuejs

• معرفی کلی درباره نمونه ی Vuejs
• استفاده از چندین نمونه ی Vuejs
• دستیابی به نمونه های Vuejs در کلاس های خارجی
• چگونگی مدیریت داده ها و متدها
• نگاه عمیق تر به el و data
• استفاده از refs در قالب ها 
• آشنایی با Vue API ها 
• فراخوانی یک قالب (Mounting a Template)
• استفاده از کامپوننت ها
• محدود کردن برخی قالب ها
• بروزرسانی DOM
• معرفی چرخه حیات فریم ورک یا Vuejs Lifecycle

پیاده سازی یک محیط واقعی با Webpack و ابزار Vue CLI

• پاسخ به این سوال که چرا یک سرور توسعه نیاز داریم؟
• منظور از محیط توسعه چیست؟
• استفاده از ابزار Vue CLI جهت ساخت پروژه
• نصب Vue CLI و ساخت اولین پروژه
• معرفی یک چشم انداز از قالب Webpack و ساختار پوشه ها
• معرفی فایل هایی با پسوند vue.
• معرفی شیء در فایل های Vue
• آموزش یادگیری ساخت نرم افزار برای نسخه production

معرفی کامپوننت ها (Components) و کار با آنها

• معرفی کامپوننت ها
• ذخیره سازی داده ها درون کامپوننت ها با استفاده از روش داده ها
• ثبت کامپوننت ها به صورت Locally و Globally
• معرفی کامپوننت Root در فایل App.vue
• ساخت یک کامپوننت
• استفاده از کامپوننت ها
• انتقال فایل ها به پوشه های مشخص جهت سهولت در کار
• تغییر نام کامپوننت ها به تگ های دلخواه (سلکتورهای دلخواه)
• محدود کردن استایل هر کامپوننت به المان های درون آن کامپوننت

ارتباط بین کامپوننت ها

• معرفی انواع ارتباط ها بین کامپوننت ها
• استفاده از Props برای برقراری رابطه بین کامپوننت پدر و فرزند (Parent to Child)
• نام گذاری props
• استفاده از props ها در کامپوننت فرزند
• اعتبار سنجی props
• استفاده از Event ها برای برقراری رابطه بین کامپوننت فرزند و پدر (Child to Parent)
• درک مفاهیم داده های یک طرفه
• برقراری ارتباط با استفاده از توابع کال بک (callback)
• آموزش برقراری ارتباط بین دو کامپوننت یک رده (Sibling component)
• استفاده از Event Bus برای برقراری ارتباط

استفاده حرفه ای و پیشرفته از کامپوننت ها

• راه اندازی ماژول پروژه
• ارسال مطالب به کامپوننت
• ارسال مطالب با استفاده از Slots 
• نحوه ی دریافت مطالب و استایل دهی کردن آنها
• استفاده از چندین Slot

پروژه دوم - لیست جملات

• معرفی و راه اندازی اولیه پروژه
• ساخت کامپوننت های نرم افزار
• ارسال داده ها با استفاده از Props و Slots
• به کاربران اجازه ساخت جملات جدید را می دهیم
• اضافه کردن جملات با استفاده از Custom Event
• افزودن یک جعبه ی info
• اجازه حذف جملات
• کنترل کردن جملات با استفاده از Progress Bar

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

• معرفی اتصالات در تگ input
• گروه بندی کردن داده ها برای ورودهای منتخب
• اصلاح ورودی های کاربران با استفاده از Input Modifiers
• معرفی اتصالات در تگ textarea
• معرفی و استفاده از Checkboxes با ذخیره داده ها درون یک آرایه
• استفاده از دکمه های رادیویی
• کنترل کردن Dropdown ها با استفاده از تگ های select و option
• معرفی v-model و ساخت یک کنترلر دلخواه
• ساخت ورودی های کنترلی دلخواه
• ثبت یک فرم

معرفی و ساخت دستورها (Directives)

• درک مفهوم دستور یا directive
• توابع هوک Hook Functions چگونه کار می کنند؟
• ساخت یک دستور ساده
• ارسال مقادیر به یک دستور دلخواه
• ارسال آرگومان ها به دستورهای دلخواه
• اصلاح یک دستور با استفاده از Modifiers ها
• ثبت دستورها به صورت Locally
• استفاده از چندین اصلاح کننده یا Modifiers به صورت همزمان
• ارسال مقادیر پیچیده به دستورها

بهبود نرم افزار با استفاده از Filter ها و Mixin ها

• ساخت یک فیلتر داخلی یا Local
• معرفی فیلترهای Global و اتصال چندین فیلتر به یکدیگر
• درک مفهوم Mixin ها 
• چگونگی ادغام کردن Mixin ها
• ساخت یک Mixin جهانی یا Global
• Mixin ها و Scope ها

افزودن انیمیشن ها و حرکات

• درک مفاهیم Transition ها
• آماده سازی کدهای مربوط به Transition ها
• راه اندازی اولین Transition
• اختصاص دادن یک کلاس CSS به Transition ها
• ساخت یک Transition به صورت Fade با استفاده از CSS
• ساخت یک Transition به صورت Slide با استفاده از CSS
• ترکیب کردن Transition و ویژگی های انیمیشن
• متحرک سازی دستورهای v-if و v-show
• ساخت یک انیمیشن دلخواه
• استفاده کلاس های CSS متنوع
• استفاده از اسامی متغییر و صفات
• انتقال حرکت بین چندین المان
• معرفی رویداد هوک ها
• معرفی مفاهیم انیمیشن سازی در جاوا اسکریپت
• استخراج CSS از یک انیمیشن
• ساخت یک انیمیشن جاوا اسکریپتی
• انیمیشن سازی کامپوننت ها
• انیمیشن سازی با استفاده از transition-group

معرفی API ها و اتصال به سرور با استفاده از vue-resource

• دستیابی به پروتکل Http با استفاده از vue-resource
• ساخت یک نرم افزار جهت کار با پروتکل Http
• نمایش ارسال داده با استفاده از متد POST
• نمایش دریافت داده با استفاده از متد GET
• پیکره بندی vue-resource به صورت جهانی یا Globally
• بررسی درخواست های متقابل
• بررسی پاسخ های متقابل
• ساخت یک منبع دلخواه (Custom Resource)
• تفاوت بین درخواست های عادی و منابع
• درک آدرس های قالب یا Template URL‌ها

مسیردهی در یک نرم افزار Vuejs

• راه اندازی مسیردهی در Vuejs با استفاده از vue-router
• آموزش حالت های مسیردهی (Hash‌ و History)
• ناوبری (Navigating) با استفاده از Router Link‌ ها
• استایل دهی کردن به لینک های فعال یا «شما اینجا هستید»
• راه اندازی پارامترهای مسیردهی Route Parameters
• بازیابی اطلاعات و استفاده از Route Parameters‌ ها
• راه اندازی مسیردهی های فرزند Child Routes (مسیرهای تو در تو)
• ناوبری (Navigating) به مسیرهای تو در تو
• پویا کردن مسیردهی ها برای هر Router Link
• دستیابی به یک راه بهتر برای لینک دادن به مسیرها
• استفاده از Query Parameters ها
• آموزش Redirecting یا انتقال کاربران به صفحات دیگر
• راه اندازی مسیرهای دیگر با استفاده از Wildcard ها
• انیمیشن سازی مسیرها با استفاده از Transition‌ها
• ارسال فرگمنت ها به مسیرها
• کنترل کردن رفتار Scroll
• محافظت از مسیرها با استفاده از Guard ها
• استفاده از متد beforeEnter در Guard ها
• استفاده از متد beforeLeave در Guard ها
• بارگذاری مسیرها به صورت Lazy Loading

مدیریت بهتر وضعیت با استفاده از Vuex 

• چرا به یک سیستم مدیریت وضعیت متفاوت احتیاج داریم؟
• درک مفاهیم Centralized State
• استفاده از Centralized State
• درک مفاهیم Getters
• استفاده از Getters
• مپ کردن Getters‌ ها به ویژگی ها
• درک مفاهیم Mutation ها
• استفاده از Mutation ها
• پاسخ به سوال اینکه چرا Mutation ها به صورت سنکرون و همزمان اجرا می شوند.
• چگونه اکشن ها Mutation ها را بهبود می بخشند؟
• استفاده از اکشن ها
• تبدیل کردن اکشن ها به متدها
• معرفی Two-Way-Binding یا v-model در Vuex
• بهینه سازی ساختار پوشه های پروژه
• ماژولار کردن سیستم مدیریت وضعیت
• استفاده از فایل های جداگانه

پروژه نهایی - سایت فروشگاهی

• معرفی و راه اندازی اولیه پروژه
• ساخت اولین کامپوننت ها
• راه اندازی مسیرها یا Routes
• اضافه کردن هدر و منو
• ساخت کامپوننت Stocks
• افزودن دکمه خرید
• راه اندازی سیستم مدیریت وضعیت Vuex
• افزودن یک ماژول نمونه کار به Vuex
• کار کردن با نمونه کارهای Stocks
• اتصال نمونه کارها به Vuex
• برطرف کردن خطاهای احتمالی
• نمایش سبد خرید فروشگاه
• نمایش لیست سفارش ها
• نمایش بهتر محصولات با فیلتر
• انیمیشن سازی مسیرها
• ذخیره و بارگذاری داده ها با استفاده از یک منو آبشاری
• راه اندازی vue-resource
• ذخیره داده ها با استفاده از متد PUT
• دریافت و بارگذاری داده ها با استفاده از متد GET
• تست نرم افزار و رفع خطاها

استفاده از Axios به جای vue-resource

• راه اندازی یک پروژه
• نصب Axios برای کار با API ها
• ارسال درخواست POST
• ارسال درخواست GET
• دسترسی به پاسخ ها
• راه اندازی یک درخواست Global
• استفاده از اینترسپتور ها یا پیش پردازش های Http
• ایجاد نمونه های دلخواه Axios

احراز هویت کاربران (Authentication) در Vuejs​​​​​​​

• توضیح احراز هویت در نرم افزارهای SPA
• راه اندازی پروژه
• افزودن فرم ثبت نام کاربران
• افزودن فرم ورود کاربران
• استفاده از Vuex برای ارسال درخواست های Auth یا احراز هویت
• ذخیره سازی داده های احراز هویت Auth در Vuex
• دستیابی به سایر منابع از طریق Vuex
• ارسال توکن به Backend‌ مجازی
• محافظت از مسیرها با استفاده از Auth Guard
• بروزرسانی وضعیت UI برا اساس وضعیت Authentication کاربر
• افزودن گزینه خروج برای کاربران
• افزودن قابلیت خروج خودکار
• افزودن قابلیت ورود خودکار