آموزش Vue JS Essentials با Vuex و Vue Router

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

مقدمه ای بر Vue An Introduction to Vue

• نحوه دریافت کمک How to Get Help

• منابع دوره Course Resources

• به انجمن ما بپیوندید! Join Our Community!

• به انجمن ما بپیوندید! Join Our Community!

• اولین برنامه Vue ما Our First Vue App

• اولین برنامه Vue ما Our First Vue App

• نمای کلی برنامه App Overview

• یک استارت کدپن A Codepen Starter

• یک استارت کدپن A Codepen Starter

• الگوها و نمونه های Vue Vue Templates and Instances

• ایجاد الگو Creating the Template

• ایجاد الگو Creating the Template

• پیوند دادن قالب ها و نمونه ها Linking Templates and Instances

• پیوند دادن قالب ها و نمونه ها Linking Templates and Instances

• پیاده سازی گام به گام Step by Step Implementation

• پیاده سازی گام به گام Step by Step Implementation

• تعریف روش های نمونه Defining Instance Methods

• تعریف دستورالعمل های Vue Defining Vue Directives

• بازیابی اطلاعات رویداد Retrieving Event Information

• بازیابی اطلاعات رویداد Retrieving Event Information

• برنامه نویسی امری در مقابل اعلامی Imperative vs Declarative Programming

• برنامه های اعلامی با Vue API Declarative Apps with the Vue API

• داده ها، محاسبه شده و روش ها Data, Computed, and Methods

• مقادیر داده به روز شده Updated Data Values

• مقادیر داده به روز شده Updated Data Values

• ویژگی های محاسبه شده Computed Properties

• مرور از شروع تا پایان Review from Start to Finish

• مرور از شروع تا پایان Review from Start to Finish

• قرار دادن قالب Template Placement

• ارجاع داده ها در قالب Referencing Data in the Template

• ارجاع داده ها در قالب Referencing Data in the Template

• عبارات در قالب ها Expressions in Templates

• رندر با قالب های رشته ای Rendering with String Templates

• راه حل تمرین Exercise Solution

• عبارات JS در قالب ها JS Expressions in Templates

• عبارات JS در قالب ها JS Expressions in Templates

• راه حل تمرین Exercise Solution

مقدمه ای بر Vue An Introduction to Vue

• نحوه دریافت کمک How to Get Help

• منابع دوره Course Resources

• نمای کلی برنامه App Overview

• الگوها و نمونه های Vue Vue Templates and Instances

• تعریف روش های نمونه Defining Instance Methods

• تعریف دستورالعمل های Vue Defining Vue Directives

• برنامه نویسی امری در مقابل اعلامی Imperative vs Declarative Programming

• برنامه های اعلامی با Vue API Declarative Apps with the Vue API

• داده ها، محاسبه شده و روش ها Data, Computed, and Methods

• ویژگی های محاسبه شده Computed Properties

• قرار دادن قالب Template Placement

• عبارات در قالب ها Expressions in Templates

• رندر با قالب های رشته ای Rendering with String Templates

• راه حل تمرین Exercise Solution

در حال حرکت با Vue CLI Moving on with Vue CLI

• نمای کلی برنامه App Overview

• نمای کلی برنامه App Overview

• چالش های برنامه App Challenges

• تولید یک پروژه جدید Generating a New Project

• چرا از Vue CLI استفاده کنیم؟ Why Use Vue CLI?

• بررسی پروژه Project Walkthrough

• بررسی پروژه Project Walkthrough

• فایل های Vue Vue Files

• پشت صحنه فایل های Vue Behind the Scenes of Vue Files

• Vue Components در مقابل Vue Instances Vue Components vs Vue Instances

• Vue Components در مقابل Vue Instances Vue Components vs Vue Instances

در حال حرکت با Vue CLI Moving on with Vue CLI

• نمای کلی برنامه App Overview

• چالش های برنامه App Challenges

• تولید یک پروژه جدید Generating a New Project

• چرا از Vue CLI استفاده کنیم؟ Why Use Vue CLI?

• فایل های Vue Vue Files

• پشت صحنه فایل های Vue Behind the Scenes of Vue Files

نوشتن برنامه های موثر Vue Writing Effective Vue Apps

• شروع از صفر Starting from Scratch

• مؤلفه برنامه The App Component

• مؤلفه برنامه The App Component

• راه دیگری برای تعیین محتوا Another Way of Specifying Content

• چندین روش پیوست DOM Multiple Ways of DOM Attachment

• چندین روش پیوست DOM Multiple Ways of DOM Attachment

• ساخت نوار جستجو Making the SearchBar

• ساخت نوار جستجو Making the SearchBar

• اجزای تودرتو Nesting Components

• اجزای تودرتو Nesting Components

• دستورالعمل رویداد Event Directives

• دستورالعمل رویداد Event Directives

• نحو رویداد کوتاه Shorthand Event Syntax

• به اشتراک گذاری داده ها بین کامپوننت ها Data Sharing Between Components

• به اشتراک گذاری داده ها بین کامپوننت ها Data Sharing Between Components

• ارتباط با وسایل و رویدادها Communication with Props and Events

• ارتباط با وسایل و رویدادها Communication with Props and Events

• انتشار رویدادها Emitting Events

• گوش دادن به رویدادهای سفارشی Listening for Custom Events

• ثبت نام یوتیوب API Youtube API Signup

• ثبت نام یوتیوب API Youtube API Signup

• جستجو در یوتیوب Searching Youtube

• بررسی پاسخ های ویدیویی Investigating Video Responses

• ارائه فهرستی از ویدئوها Rendering a List of Videos

• به روز رسانی داده ها باعث بازپرداخت می شود Updating Data Causes Rerenders

• داده ها در Components vs Instances Data in Components vs Instances

• به روز رسانی داده ها Updating Data

• ارتباط از والدین به فرزند Communicating from Parent to Child

• اعتبار سنجی پایه Prop Validation

• اعتبار سنجی پایه Prop Validation

• اجزای لیست جدا Separate List Components

• لیست هایی با V-For Lists with V-For

• جابجایی لوازم جانبی با V-For Handling Props with V-For

• کلیدهایی با V-For Keys with V-For

• کلیدهایی با V-For Keys with V-For

• از جمله استایل بوت استرپ Including Bootstrap Styling

• از جمله استایل بوت استرپ Including Bootstrap Styling

• حالت دادن به نوار جستجو Styling the Search Bar

• حالت دادن به لیست ویدیوها Styling the Video List

• مرجع تصویر بند انگشتی Thumbnail Image Reference

• تصویر بند انگشتی توسط ویژگی محاسبه شده Thumbnail By Computed Property

• تصویر بند انگشتی توسط ویژگی محاسبه شده Thumbnail By Computed Property

• یک ظاهر طراحی بیشتر مورد فهرست More List Item Styling

• مدیریت کلیک های تودرتو Handling Nested Clicks

• مدیریت رویداد در لیست ویدیو Event Handling in the VideoList

• دریافت رویدادها در برنامه Receiving Events in the App

• دریافت رویدادها در برنامه Receiving Events in the App

• انتقال لوازم به جزئیات ویدیو Passing Props to the Video Detail

• انتقال لوازم به جزئیات ویدیو Passing Props to the Video Detail

• به روز رسانی داده ها Updating Data

• دستورالعمل V-If The V-If Directive

• ارجاع به عنوان و توضیحات ویدیو Referencing Video Title and Description

• ارجاع به عنوان و توضیحات ویدیو Referencing Video Title and Description

• ساخت URL جاسازی Crafting the Embed URL

• ساخت URL جاسازی Crafting the Embed URL

• جاسازی های پاسخگو Responsive Embeds

• جاسازی های پاسخگو Responsive Embeds

• طرح بندی دو ستونی Two Column Layout

• طرح بندی دو ستونی Two Column Layout

• بررسی برنامه App Review

• رویدادها و روش ها Events and Methods

• رویدادها و روش ها Events and Methods

• راه حل تمرین Exercise Solution

• داده های مؤلفه Component Data

• داده های مؤلفه Component Data

• راه حل تمرین Exercise Solution

• راه حل تمرین Exercise Solution

• رویدادها، داده ها و دستورالعمل ها Events, Data, and Directives

نوشتن برنامه های موثر Vue Writing Effective Vue Apps

• شروع از صفر Starting from Scratch

• راه دیگری برای تعیین محتوا Another Way of Specifying Content

• نحو رویداد کوتاه Shorthand Event Syntax

• انتشار رویدادها Emitting Events

• گوش دادن به رویدادهای سفارشی Listening for Custom Events

• جستجو در یوتیوب Searching Youtube

• بررسی پاسخ های ویدیویی Investigating Video Responses

• ارائه فهرستی از ویدئوها Rendering a List of Videos

• به روز رسانی داده ها باعث بازپرداخت می شود Updating Data Causes Rerenders

• داده ها در Components vs Instances Data in Components vs Instances

• به روز رسانی داده ها Updating Data

• ارتباط از والدین به فرزند Communicating from Parent to Child

• اجزای لیست جدا Separate List Components

• لیست هایی با V-For Lists with V-For

• جابجایی لوازم جانبی با V-For Handling Props with V-For

• حالت دادن به نوار جستجو Styling the Search Bar

• حالت دادن به لیست ویدیوها Styling the Video List

• مرجع تصویر بند انگشتی Thumbnail Image Reference

• یک ظاهر طراحی بیشتر مورد فهرست More List Item Styling

• مدیریت کلیک های تودرتو Handling Nested Clicks

• مدیریت رویداد در لیست ویدیو Event Handling in the VideoList

• به روز رسانی داده ها Updating Data

• دستورالعمل V-If The V-If Directive

• بررسی برنامه App Review

• راه حل تمرین Exercise Solution

• راه حل تمرین Exercise Solution

• رویدادها، داده ها و دستورالعمل ها Events, Data, and Directives

رسیدگی به وضعیت با Vuex Handling State with Vuex

• نمای کلی برنامه App Overview

• نمای کلی برنامه App Overview

• چالش های برنامه App Challenges

• وابستگی های اضافی Additional Dependencies

• وابستگی های اضافی Additional Dependencies

• کمی دیگ بخار A Bit of Boilerplate

• کمی دیگ بخار A Bit of Boilerplate

• ساخت هدر Building the Header

• از جمله رابط کاربری معنایی Including Semantic UI

• از جمله رابط کاربری معنایی Including Semantic UI

• سبک دادن به سربرگ Styling the Header

• نمای کلی Imgur Imgur Overview

رسیدگی به وضعیت با Vuex Handling State with Vuex

• نمای کلی برنامه App Overview

• چالش های برنامه App Challenges

• ساخت هدر Building the Header

• سبک دادن به سربرگ Styling the Header

• نمای کلی Imgur Imgur Overview

احراز هویت در Vue با OAuth2 Authentication in Vue with OAuth2

• نمای کلی OAuth OAuth Overview

• نمای کلی OAuth OAuth Overview

• ثبت نام Imgur API Imgur API Signup

• مدیریت منطق برنامه Handling App Logic

• معرفی Vuex Vuex Introduction

• معرفی Vuex Vuex Introduction

• ماژول های Vuex Vuex Modules

• ماژول های Vuex Vuex Modules

• اتصال Vuex به Vue Connecting Vuex to Vue

• اتصال Vuex به Vue Connecting Vuex to Vue

• طراحی اولیه ماژول احراز هویت Initial Auth Module Design

• طراحی اولیه ماژول احراز هویت Initial Auth Module Design

• جهش های ماژول Auth Auth Module Mutations

• وضعیت ماژول و دریافت کننده ها Auth Module State and Getters

• به روز رسانی ارزش های دولتی Updating State Values

• به روز رسانی ارزش های دولتی Updating State Values

• خروج از سیستم با اقدامات Logging Out with Actions

• خروج از سیستم با اقدامات Logging Out with Actions

• کمک کننده های API جداگانه Separate API Helpers

• کمک کننده های API جداگانه Separate API Helpers

• تشکیل URL OAuth2 Forming the OAuth2 URL

• راه اندازی جریان ورود Initiating the Login Flow

• سیم کشی در ماژول Auth Wiring in the Auth Module

• درخواست اولیه OAuth Initial OAuth Request

• درخواست اولیه OAuth Initial OAuth Request

• استخراج رمز دسترسی Extracting the Access Token

احراز هویت در Vue با OAuth2 Authentication in Vue with OAuth2

• ثبت نام Imgur API Imgur API Signup

• مدیریت منطق برنامه Handling App Logic

• جهش های ماژول Auth Auth Module Mutations

• وضعیت ماژول و دریافت کننده ها Auth Module State and Getters

• تشکیل URL OAuth2 Forming the OAuth2 URL

• راه اندازی جریان ورود Initiating the Login Flow

• سیم کشی در ماژول Auth Wiring in the Auth Module

• استخراج رمز دسترسی Extracting the Access Token

ناوبری با روتر Vue Navigation with Vue Router

• سیم کشی روتر Vue Wiring up Vue Router

• سیم کشی روتر Vue Wiring up Vue Router

• مرورگر در مقابل هش روترها Browser vs Hash Routers

• مرورگر در مقابل هش روترها Browser vs Hash Routers

• نقطه درج کامپوننت Component Insertion Point

• نقطه درج کامپوننت Component Insertion Point

• روش‌های چرخه حیات اجزا Component Lifecycle Methods

• فراخوانی اقدامات Calling Actions

• فراخوانی اقدامات Calling Actions

• تجزیه توکن دسترسی Parsing the Access Token

• داده ها در کامپوننت ها با MapGetters Data in Components with MapGetters

• داده ها در کامپوننت ها با MapGetters Data in Components with MapGetters

• دستورالعمل V-Else The V-Else Directive

• دستورالعمل V-Else The V-Else Directive

• وضعیت ورود مداوم Persisting Login State

• یک ظاهر طراحی دکمه Button Styling

• خروج کاربران Logging Out Users

• خروج کاربران Logging Out Users

• به روز رسانی قطعات خودکار Automatic Component Updates

• پاک کردن توکن های LocalStorage Clearing LocalStorage Tokens

• پاک کردن توکن های LocalStorage Clearing LocalStorage Tokens

• ناوبری برنامه ای Programmatic Navigation

• پیکربندی مسیر اضافی Additional Route Config

• پیکربندی مسیر اضافی Additional Route Config

• ناوبری با Router-Link Navigation with Router-Link

• ناوبری با Router-Link Navigation with Router-Link

ناوبری با روتر Vue Navigation with Vue Router

• روش‌های چرخه حیات اجزا Component Lifecycle Methods

• تجزیه توکن دسترسی Parsing the Access Token

• وضعیت ورود مداوم Persisting Login State

• یک ظاهر طراحی دکمه Button Styling

• به روز رسانی قطعات خودکار Automatic Component Updates

• ناوبری برنامه ای Programmatic Navigation

طراحی ماژول های Vuex Design of Vuex Modules

• طراحی ماژول تصویر Image Module Deisgn

• پیاده سازی ماژول Module Implementation

• واکشی اسناد API تصاویر Fetch Images API Documentation

• واکشی اسناد API تصاویر Fetch Images API Documentation

• واکشی تصاویر Fetching Images

• برقراری ارتباط بین ماژول ها Communicating Across Modules

• برقراری ارتباط بین ماژول ها Communicating Across Modules

• تست پاسخ تصاویر Testing Images Reponse

• آپلود تصویر از طریق Imgur Image Upload via Imgur

• تعهد تصاویر به حالت Committing Images to State

• نقشه برداری Images Getter Mapping the Images Getter

• تصاویر فهرست شده Listing Images

• تصاویر فهرست شده Listing Images

طراحی ماژول های Vuex Design of Vuex Modules

• طراحی ماژول تصویر Image Module Deisgn

• پیاده سازی ماژول Module Implementation

• واکشی تصاویر Fetching Images

• تست پاسخ تصاویر Testing Images Reponse

• آپلود تصویر از طریق Imgur Image Upload via Imgur

• تعهد تصاویر به حالت Committing Images to State

• نقشه برداری Images Getter Mapping the Images Getter

مدیریت آپلود تصویر Handling Image Upload

• نمای کلی آپلود تصویر Image Upload Overview

• آپلود فرم HTML Upload Form HTML

• سبک دادن به فرم آپلود Styling the Upload Form

• سبک دادن به فرم آپلود Styling the Upload Form

• اقدام آپلود تصاویر The Upload Images Action

• اقدام آپلود تصاویر The Upload Images Action

• رویداد تغییر فایل File Change Event

• پذیرش چندین فایل تصویری Accepting Multiple Image Files

• مسیر آپلود The Path to Upload

• پیوست کردن تصاویر با FormData Attaching Images with FormData

• آپلودهای همزمان Concurrent Uploads

• طرح بندی با شبکه CSS Layout with CSS Grid

• مخفی کردن تصاویر در خروج Hide Images on Logout

• گسترش برنامه Expanding the App

• گسترش برنامه Expanding the App

مدیریت آپلود تصویر Handling Image Upload

• نمای کلی آپلود تصویر Image Upload Overview

• آپلود فرم HTML Upload Form HTML

• رویداد تغییر فایل File Change Event

• پذیرش چندین فایل تصویری Accepting Multiple Image Files

• مسیر آپلود The Path to Upload

• پیوست کردن تصاویر با FormData Attaching Images with FormData

• آپلودهای همزمان Concurrent Uploads

• طرح بندی با شبکه CSS Layout with CSS Grid

• مخفی کردن تصاویر در خروج Hide Images on Logout

موارد اضافی Extras

• جایزه! Bonus!

موارد اضافی Extras

• جایزه! Bonus!