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

The Ultimate Vue JS 2 Developers Course [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: این دوره شامل تمام مفاهیم Vue از مبتدی تا پیشرفته، روشی برای ایجاد یک برنامه کاربردی جهانی با رندر سمت سرور است و از پلاگین های محبوب اکوسیستم Vue مانند vue-router و vue-resources استفاده می کند. [*] همه مفاهیم Vue را از مبتدی تا پیشرفته درک کنید.[*] با استفاده از Vue.js با استفاده از هر ویژگی Vue، سه برنامه کاربردی دنیای واقعی بسازید.[*] از کتابخانه مدیریت بیانیه Vuex استفاده کنید.[*] Vue اولیه را با ES5 و همچنین مدرن بنویسید. Vue با ES6. این دوره برای توسعه دهندگان وب موجود که به دنبال یادگیری Vue.js هستند، توسعه دهندگان وب جدیدی که به دنبال انتخاب چارچوب جاوا اسکریپت هستند، توسعه دهندگان کنجکاو React و Angular در نظر گرفته شده است. [*] محیط VueJS را با ابزارهای توسعه از جمله Webpack راه اندازی کنید. [*] یک برنامه جهانی با رندر سمت سرور ایجاد کنید.[*] از افزونه های محبوب اکوسیستم Vue مانند vue-router و vue-resource استفاده کنید.

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

معرفی 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

نمایش نظرات

Packtpub یک ناشر دیجیتالی کتاب‌ها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرم‌افزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتاب‌ها، ویدیوها و دوره‌های آموزشی می‌پردازد که به توسعه‌دهندگان و متخصصان فناوری اطلاعات کمک می‌کند تا مهارت‌های خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامه‌نویسی، توسعه وب، داده‌کاوی، امنیت سایبری و هوش مصنوعی را پوشش می‌دهد. محتوای این منابع به صورت کاربردی و به‌روز ارائه می‌شود تا کاربران بتوانند دانش و توانایی‌های لازم برای موفقیت در پروژه‌های عملی و حرفه‌ای خود را کسب کنند.

آموزش دوره توسعه دهندگان Ultimate Vue JS 2 [ویدئو]
جزییات دوره
13 h 1 m
177
Packtpub Packtpub
(آخرین آپدیت)
1
5 از 5
ندارد
دارد
دارد
Anthony Gore
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Anthony Gore Anthony Gore

آنتونی یک توسعه دهنده وب و مدرس دوره های آنلاین از سیدنی، استرالیا است. او نویسنده دوره ویدیویی نهایی Vue.js Developers و متصدی خبرنامه توسعه دهندگان Vue.js است. او چندین سال به عنوان توسعه دهنده وب فریلنسر کار کرده است، اما برای سازمان های بزرگ نیز کار کرده است. او کارهای توسعه را روی همه انجام داده است. انواع پروژه ها از برنامه های وب تک صفحه ای گرفته تا سایت های بزرگ شرکتی. علاوه بر توسعه وب، او یک موسیقیدان مشتاق است و از سفر و کار از راه دور لذت می برد.