آموزش دوره توسعه دهندگان Ultimate Vue JS 2 [ویدئو]

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

معرفی Introduction

• معرفی دوره Course introduction

پروژه 1 - بررسی اجمالی و راه اندازی Project 1 - Overview and setup

• نسخه ی نمایشی محصول نهایی Demo of the finished product

• برای Imgur API ثبت نام کنید Register for the Imgur API

• بررسی مخزن Github فروشگاه پوستر Vue.js Reviewing the Vue.js Poster Store Github repo

• مخزن را کلون کنید، وابستگی ها را نصب کنید و فایل محیط را راه اندازی کنید Clone repo, install dependencies and setup environment file

• سرور در حال اجرا و مشاهده پروژه Running server and viewing project

• گشت و گذار در فایل پروژه Tour of the project file

پروژه 1 - راه اندازی و اجرا با Vue Project 1 - Up and running with Vue

• Vue را در پروژه قرار دهید Include Vue in project

• یک نمونه از Vue ایجاد کنید Creat an instance of Vue

• افزودن ویژگی داده Adding a data property

• موارد ضروری Vue: دستورالعمل ها Vue essentials: Directives

• اضافه کردن یک روش Adding a method

• ارائه فهرستی از اقلام Rendering a list of items

• کلاس ها را به آیتم اضافه کنید Add classes to item

پروژه 1 - افزودن جستجوی محصول Project 1 - Adding product search

• دکمه جستجو Search button

• ورودی جستجو Search input

• مروری بر vue-resource Overview of vue-resource

• نمای کلی API Overview of API

• افزودن vue-resource به پروژه Adding vue-resource to project

• فراخوان AJAX برای محصولات AJAX call for products

پروژه 1 - ساخت لیست محصول Project 1 - Building the product list

• جایگزینی اقلام ساختگی با چیز واقعی Replacing dummy items with the real thing

• تصویر محصول Product image

• افزودن تعداد نتایج جستجو به لیست محصولات Adding search result count to product list

• در حال بارگذاری پیام Loading message

• موارد ضروری Vue: قلاب چرخه زندگی Vue essentials: Lifecycle hooks

• جستجوی پیش فرض در بارگذاری صفحه Default search on page load

• اضافه کردن قیمت به محصولات Adding price to products

پروژه 1 - افزایش سبد خرید Project 1 - Enhancing the shopping cart

• موارد ضروری Vue: انتقال Vue essentials: Transitions

• محو شدن در سبد خرید Fading in cart total

• موارد ضروری Vue: کلید Vue essentials: Key

• موارد ضروری Vue: فهرست انتقال Vue essentials: List transitions

• محو شدن در اقلام سبد خرید Fade in cart items

پروژه 1 - محصولات بارگیری را اسکرول کنید Project 1 - Scroll loading products

• نحوه عملکرد بار اسکرول How scroll load works

• ایجاد آرایه نتایج Creating the results array

• از جمله مانیتور اسکرول در پروژه Including scroll monitor in the project

• تنظیمات اولیه مانیتور را اسکرول کنید Scroll monitor basic setup

• اجرای بار اسکرول (قسمت 1) Implementing scroll load (part 1)

• اجرای بار اسکرول (قسمت 2) Implementing scroll load (part 2)

• رفع نتایج جستجو Fixing search results

• افزودن یک پیام "موارد دیگری وجود ندارد". Adding a "no more items" message

• موارد ضروری Vue: ویژگی های محاسبه شده Vue essentials: Computed properties

• تقویت منطق "دیگر آیتم نیست". Enhancing "no more items" logic

پروژه 1 - کارهای پایانی Project 1 - Finishing touches

• پنهان کردن عناصر قبل از کامپایل Vue Hiding elements before Vue compiles them

• نیاز به یک رشته جستجو Requiring a search string

پروژه 2 - بررسی اجمالی و راه اندازی Project 2 - Overview and setup

• نسخه ی نمایشی محصول نهایی Demo of the finished product

• دریافت داده از OMDB API Getting data from the OMDB API

• مخزن کلون، نصب NPM، محیط راه اندازی Clone repo, NPM install, setup environment

• در حال اجرا سرور محلی Running local server

• گشت و گذار در فایل های پروژه Tour of the project files

• پیکربندی بسته وب Webpack configuration

• سلام دنیا Hello World

پروژه 2 - راه اندازی کامپوننت ها Project 2 - Setting up components

• موارد ضروری Vue: کامپوننت ها Vue essentials: Components

• پیکربندی اجزا Configuring components

• مؤلفه فهرست فیلم را تنظیم کنید Setup the movie-list component

• کامپوننت check-filter را راه اندازی کنید Setup the check-filter component

پروژه 2 - فیلترها Project 2 - Filters

• لوازم ضروری Vue: لوازم Vue essentials: Props

• به مؤلفه چک فیلتر اضافه کنید Add props to check-filter component

• در حال تغییر فیلتر چک Making check-filter toggleable

• موارد ضروری Vue: رویدادهای سفارشی Vue essentials: Custom events

• انتشار یک رویداد سفارشی از فیلتر چک Emitting a custom event from check-filter

• موارد ضروری Vue: ابزارهای توسعه Vue.js Vue essentials: Vue.js devtools

• افزودن محموله به رویداد فیلتر چک Adding a payload to check-filter event

• پردازش رویداد check-filter در نمونه ریشه Processing check-filter event in root instance

• آرایه های فیلتر را به لیست فیلم اضافه کنید Add filter arrays to movie-list

• ایجاد منطق برای فیلتر ژانر Creating logic for genre filter

پروژه 2 - Refactoring با اجزای تک فایل Project 2 - Refactoring with single file components

• موارد ضروری Vue: اجزای فایل منفرد Vue essentials: Single file components

• پروژه Refactor برای استفاده از اجزای تک فایل Refactor project to use single file components

پروژه 2 - دریافت داده از API Project 2 - Getting data from API

• آشنایی با API Understanding the API

• دریافت داده از API Getting data from the API

• داده های ساختگی را با داده های API جایگزین کنید Replace dummy data with API data

• ایجاد مؤلفه فیلم-آیتم Creating movie-item component

• شکل دادن به قالب فیلم-آیتم Fleshing out movie-item template

• بهبود فیلتر ژانر برای فیلم های چند ژانر Enhance genre filter for multi-genre movies

• بدون افزودن نتیجه و بارگیری پیام Adding no results and loading messages

پروژه 2 - نمایش زمان جلسات Project 2 - Displaying session times

• افزودن کتابخانه لحظه ای به پروژه Adding moment library to project

• نمایش زمان جلسات Displaying session times

• فیلتر کردن زمان جلسات Filtering session times

• افزودن فیلترهای زمان Adding time filters

• فیلتر کردن فیلم ها بر اساس فیلتر زمان Filter movies based on time filter

• جلسات را بر اساس فیلتر زمان فیلتر کنید Filter sessions based on time filter

• پیام بدون نتیجه را با فیلترها تقویت کنید Enhance the no results message with filters

پروژه 2 - ارتباط مؤلفه با اتوبوس رویداد Project 2 - Component communication with an event bus

• موارد ضروری Vue: اتوبوس رویداد Vue essentials: Event bus

• استفاده از اتوبوس رویداد جهانی در پروژه Using a global event bus in the project

پروژه 2 - ایجاد صفحه جزئیات Project 2 - Creating the Detail page

• موارد ضروری Vue: روتر Vue Vue essentials: Vue router

• چکیده صفحه اصلی به جزء نمای کلی Abstract main page into overview component

• راه اندازی روتر Vue Setting up Vue router

• افزودن نمای روتر به قالب اصلی Adding router-view to main template

• ایجاد صفحه جزئیات Creating detail page

• انتقال شناسه فیلم به صفحه جزئیات Passing movie ID to detail page

• نمایش فیلم مورد در صفحه جزئیات Displaying movie-item in detail page

• موارد ضروری Vue: اسلات Vue essentials: Slots

• گنجاندن اسلات در فیلم مورد Incorporating slots in movie-item

• پر کردن صفحه جزئیات Fleshing out detail page

پروژه 2 - اضافه کردن انتخابگر روز Project 2 - Adding the day selector

• ایجاد مؤلفه انتخاب روز Creating day-select component

• روزها را به انتخاب روز اضافه می کند Addings days to day-select

• منطق انتخاب روز Day selection logic

• دارایی روز در سطح برنامه Application-level day property

• انتخابگر روز موبایل Mobile day selector

پروژه 2 - اضافه کردن راهنمای ابزار Project 2 - Adding tooltips

• موارد ضروری Vue: دستورالعمل های سفارشی Vue essentials: Custom directives

• افزودن دستورالعمل سفارشی راهنمای ابزار Adding tooltip custom directive

• ایجاد راهنمای ابزار در DOM Creating tooltip in DOM

• اضافه کردن کلاس ها و شنوندگان رویداد به راهنمای ابزار Adding classes and event listeners to tooltip

• موارد ضروری Vue: پلاگین ها Vue essentials: Plugins

• ساختن راهنمای ابزار به یک افزونه سفارشی Making tooltip a custom plugin

پروژه 2 - کارهای پایانی Project 2 - Finishing touches

• افزودن نگه‌داشتن زنده به روتر برای حفظ وضعیت فیلتر Adding keep-alive to router to maintain filter state

• نحوه عملکرد v-cloak در کنار Webpack How v-cloak works alongside Webpack

• ساختمان برای تولید Building for production

پروژه 3 - نمای کلی و راه اندازی Project 3 - Overview and setup

• نسخه ی نمایشی محصول نهایی Demo of the finished product

• مخزن کلون، نصب NPM، محیط راه اندازی Clone repo, NPM install, setup environment

• گشت و گذار در فایل ها Tour of the files

• پیکربندی بسته وب و استخراج نسخه نمایشی متن Webpack configuration and extract text demo

پروژه 3 - تنظیم تقویم Project 3 - Setting up the calendar

• مؤلفه برنامه را راه اندازی کنید Setup the app component

• لحظه به ریشه اضافه کنید، منطقه زمانی را تنظیم کنید Add moment to root, set timezone

• لیست روزهای ماه جاری را ایجاد کنید Generate list of days in current month

• اضافه کردن روز به شروع/پایان ماه برای هفته‌های کامل Padding days to start/end of month for complete weeks

• گروه بندی روزها به بلوک های هفته Grouping days into blocks of weeks

پروژه 3 - قابلیت روز تقویم Project 3 - Calendar day functionality

• موارد ضروری Vue: حروف کوتاه Vue essentials: Shorthands

• افزودن مؤلفه روز تقویم Adding calendar-day component

• افزودن روزهای هفته به بالای جدول تقویم Adding days of week above calendar grid

• برجسته کردن روز جاری در تقویم Highlighting current day on calendar

• جلوه های رابط کاربری برای روزهای گذشته و روزهای خارج از ماه UI effects for past and days outside of month

• ملزومات Vue: Vuex Vue essentials: Vuex

• Vuex store را به پروژه اضافه کنید و ویژگی های حالت اولیه را ایجاد کنید Add Vuex store to project and create basic state properties

پروژه 3 - افزودن انتخابگر ماه Project 3 - Adding the month selector

• اضافه کردن هدر و ایجاد مؤلفه ماه جاری Adding header and creating current-month component

• نمایش تاریخ در مؤلفه ماه جاری Displaying date in current-month component

• افزودن دکمه‌ها به مؤلفه ماه جاری Adding buttons to current-month component

• انتقال Vuex به فایل خود Moving Vuex into own file

• تغییر ماه و سال با جهش Vuex Changing month and year with Vuex mutation

• تقویت منطق ماه جاری Enhancing current-month logic

• Vue.js Dev Tools: Vuex Vue.js Dev Tools: Vuex

پروژه 3 - ایجاد فرم رویداد Project 3 - Creating the event form

• ایجاد کامپوننت شکل رویداد Creating event-form component

• ضبط کلیک در روز تقویم Capture click in calendar-day

• فرم رویداد تعیین موقعیت Positioning Event Form

• باز کردن و بستن فرم رویداد Opening and closing Event Form

• نمایش رویدادها در روز تقویم Displaying events in calendar-day

• ایجاد حالت رویدادها در فروشگاه Creating events state in store

• افزودن ورودی به فرم رویداد Adding input to event-form

• رویداد جدید را برای فروشگاه ارسال کنید Submit new event to store

• تاریخ رویداد را در فروشگاه دریافت کنید Get event date in store

• بهبود فرم Improving form

• دستورالعمل فوکوس، Enter keyup ایجاد می شود Focus directive, Enter keyup is create

• نمایش تاریخ در فرم رویداد Displaying date on Event Form

• روز فعال «فرم رویداد» را برجسته کنید Highlight Event Form active day

پروژه 3 - بارگیری رویدادهای ذخیره شده Project 3 - Loading stored events

• راه اندازی برای ارسال رویدادها به سرور Setup for sending events to server

• دریافت رویداد در سرور Receiving event on server

• موارد ضروری Vue: اقدامات Vuex Vue essentials: Vuex actions

• ایجاد اکشن addEvent در فروشگاه Creating addEvent action in store

• بازگرداندن یک قول از اقدام addEvent Returning a promise from addEvent action

پروژه 3 - نوشتن رویدادها در قالب Project 3 - Writing events to template

• وضعیت Vuex را در فایل اصلی جایگزین کنید Replace Vuex state in main file

• داده های ساختگی را به قالب HTML منتقل کنید Move mock data to HTML template

• پیوند داده های ساختگی در فایل HTML Splicing mock data into HTML file

پروژه 3 - رندر سمت سرور Project 3 - Server-side rendering

• موارد ضروری Vue: توابع رندر Vue essentials: Render functions

• ایجاد الگوی نمونه ریشه با تابع رندر Creating root instance template with a render function

• مقدمه ای بر رندر سمت سرور Introduction to server-side rendering

• جریان وب بسته رندر سمت سرور Server-side rendering webpack flow

• ایجاد فایل ورودی مشترک Creating common entry file

• ایجاد فایل ورودی سرور Creating server entry file

• راه اندازی رندر بسته Setting up bundle renderer

• اتصال بسته رندر شده به قالب HTML Splicing rendered bundle into HTML template

• هیدراتاسیون حالت Vuex Vuex state hydration

پروژه 3 - کارهای پایانی Project 3 - Finishing touches

• افزودن تصویر به هدر و بارگذاری مجدد صفحه در رندر اولیه Adding image to header and reloading page on initial render

• ساختمان برای تولید Building for production

بسته شدن Wrap up

• بسته شدن Wrap up