آموزش Vue - راهنمای کامل (شامل Vue Router، Vuex و Composition API) [ویدئو]

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

شروع شدن Getting Started

• به دوره خوش آمدید! Welcome to the Course!

• Vue.js چیست؟ What is Vue.js?

• روش های مختلف استفاده از Vue Different Ways of Using Vue

• کاوش گزینه های Vue Exploring Vue Alternatives

• ساختن اولین برنامه خود با جاوا اسکریپت Building Your First App with JavaScript

• ساخت مجدد برنامه با Vue.js Re-Building the App with Vue.js

• Vue Versus Vanilla JavaScript (فقط جاوا اسکریپت) Vue Versus Vanilla JavaScript (Just JavaScript)

• راه اندازی محیط توسعه دوره Setting Up the Course Development Environment

• خلاصه و محتویات دوره Course Outline and Contents

• چگونه از این دوره بیشترین بهره را ببرید How to Get the Most Out of This Course

مفاهیم اولیه و اصلی - تعامل مدل شی سند (DOM) با Vue Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue

• معرفی ماژول Module Introduction

• ایجاد و اتصال نمونه های برنامه Vue Creating and Connecting Vue App Instances

• درون یابی و اتصال داده ها Interpolation and Data Binding

• ویژگی های الزام آور با دستورالعمل "V-Bind". Binding Attributes with the “V-Bind” Directive

• آشنایی با "روش ها" در Vue Apps Understanding “Methods” in Vue Apps

• کار با داده ها در داخل یک برنامه Vue Working with Data Inside a Vue App

• خروجی محتوای خام HTML با V-html Outputting Raw HTML Content with V-html

• خلاصه اول First Summary

• درک رویداد Binding Understanding Event Binding

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

• کار با رویدادها و استدلال ها Working with Events and Arguments

• استفاده از Native Event Object Using the Native Event Object

• کاوش در اصلاح کننده های رویداد Exploring Event Modifiers

• قفل کردن محتوا با V-Once Locking Content with V-Once

• اتصال داده + اتصال رویداد = اتصال دو طرفه Data Binding + Event Binding = Two-Way Binding

• روش های مورد استفاده برای اتصال داده ها: چگونه کار می کند؟ Methods Used for Data Binding: How it Works?

• معرفی ویژگی های محاسبه شده Introducing Computed Properties

• کار با Watchers Working with Watchers

• روش ها در مقابل ویژگی های محاسبه شده در مقابل ناظران Methods Versus Computed Properties Versus Watchers

• V-Bind و V-On Shorthands V-Bind and V-On Shorthands

• یک ظاهر طراحی پویا با سبک های درون خطی Dynamic Styling with Inline Styles

• اضافه کردن کلاس های CSS به صورت پویا Adding CSS Classes Dynamically

• کلاس ها و ویژگی های محاسبه شده Classes and Computed Properties

• کلاس های دینامیک: نحو آرایه Dynamic Classes: Array Syntax

• خلاصه ماژول Module Summary

ارائه محتوا و فهرست های مشروط Rendering Conditional Content and Lists

• معرفی ماژول Module Introduction

• درک مسئله Understanding the Problem

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• V-if، V-else و V-else-if V-if, V-else, and V-else-if

• استفاده از V-show به جای V-if Using V-show Instead of V-if

• رندر کردن لیست داده ها Rendering Lists of Data

• غواصی عمیق تر در v-For Diving Deeper into v-For

• حذف موارد فهرست Removing List Items

• گوش دادن به رویدادها Listening to Events

• خلاصه ماژول Module Summary

پروژه دوره: بازی قاتل هیولا Course Project: The Monster Slayer Game

• معرفی ماژول Module Introduction

• راه اندازی پروژه و روش های اول Project Setup and First Methods

• به روز رسانی Healthbars Updating the Healthbars

• افزودن یک "حمله ویژه". Adding a “Special Attack”

• افزودن یک عملکرد "Heal". Adding a “Heal” Functionality

• افزودن یک صفحه نمایش «بازی بیش از حد». Adding a “Game Over” Screen

• اتمام کارکرد اصلی Finishing the Core Functionality

• اضافه کردن یک گزارش نبرد Adding a Battle Log

Vue: پشت صحنه Vue: Behind the Scenes

• معرفی ماژول Module Introduction

• مقدمه ای بر واکنش پذیری Vue An Introduction to Vue's Reactivity

• Vue Reactivity: A Deep Dive Vue Reactivity: A Deep Dive

• یک برنامه در مقابل چندین برنامه One App Versus Multiple Apps

• درک قالب ها Understanding Templates

• کار با Refs Working with Refs

• چگونه Vue مدل شیء سند (DOM) را به روز می کند How Vue Updates the Document Object Model (DOM)

• چرخه حیات برنامه Vue - تئوری Vue App Lifecycle – Theory

• چرخه عمر برنامه Vue - تمرین کنید Vue App Lifecycle – Practice

معرفی کامپوننت ها Introducing Components

• معرفی ماژول Module Introduction

• درک مسئله Understanding the Problem

• معرفی کامپوننت ها Introducing Components

• ایجاد رابط های کاربری پیچیده با کامپوننت ها Building Complex User Interfaces with Components

با Vue CLI به یک تنظیم و گردش کار بهتر توسعه می‌روید Moving to a Better Development Setup and Workflow with the Vue CLI

• معرفی ماژول Module Introduction

• چرا به سرور توسعه نیاز دارید؟ Why You Need a Development Server?

• چرا تجربه توسعه دهنده بهتری می خواهید؟ Why You Want a Better Developer Experience?

• نصب و استفاده از Vue CLI Installing and Using the Vue CLI

• بازرسی پروژه ایجاد شده Inspecting the Created Project

• بررسی کد Vue و فایل‌های “.vue†Inspecting the Vue Code and “.vue” Files

• افزودن پسوند “Veturâ € به کد ویژوال استودیو Adding the “Vetur” Extension to Visual Studio Code

• اطلاعات بیشتر در “.vueâ € Files More on “.vue” Files

• پروژه Vue جدید A New Vue Project

• ایجاد یک برنامه پایه Vue Creating a Basic Vue App

• افزودن کامپوننت Adding a Component

• اضافه کردن یک ظاهر طراحی شده Adding Styling

ارتباط مؤلفه Component Communication

• معرفی ماژول Module Introduction

• معرفی “Props†(والد => ارتباط کودک) Introducing “Props” (Parent => Child Communication)

• رفتار سرپایی و تغییر لوازم Prop Behavior and Changing Props

• اعتبار سنجی لوازم Validating Props

• کار با Dynamic Prop Values Working with Dynamic Prop Values

• انتشار رویدادهای سفارشی (فرزند => ارتباط والدین) Emitting Custom Events (Child => Parent Communication)

• تعریف و اعتبارسنجی رویدادهای سفارشی Defining and Validating Custom Events

• نسخه ی نمایشی: افزودن کامپوننت ها و اتصال آنها Demo: Adding Components and Connecting Them

• نسخه ی نمایشی: افزودن ارتباطات کامپوننت بیشتر Demo: Adding More Component Communication

• یک مشکل بالقوه A Potential Problem

• ارائه + تزریق برای نجات Provide + Inject to the Rescue

• ارائه + تزریق برای توابع/روش ها Provide + Inject for Functions/Methods

• ارائه + Inject در مقابل Props و رویدادهای سفارشی Provide + Inject Versus Props and Custom Events

• خلاصه ماژول Module Summary

غواصی عمیق تر در اجزا Diving Deeper into Components

• معرفی ماژول Module Introduction

• راه اندازی پروژه Project Setup

• جهانی در مقابل اجزای محلی Global Versus Local Components

• سبک های محدوده Scoped Styles

• معرفی اسلات ها Introducing Slots

• اسلات به نام Named Slots

• سبک های اسلات و تالیف Slot Styles and Compilation

• اطلاعات بیشتر در مورد اسلات More on Slots

• اسلات های محدوده Scoped Slots

• اجزای دینامیک Dynamic Components

• زنده نگه داشتن اجزای پویا Keeping Dynamic Components Alive

• استفاده از آنچه می دانید + یک مشکل Applying What You Know + a Problem

• عناصر انتقال از راه دور Teleporting Elements

• کار با Fragments Working with Fragments

• راهنمای سبک Vue The Vue Style Guide

• حرکت به یک ساختار پوشه متفاوت Moving to a Different Folder Structure

• خلاصه ماژول Module Summary

پروژه دوره: اپلیکیشن منابع یادگیری Course Project: The Learning Resources App

• معرفی ماژول Module Introduction

• راه اندازی و مراحل اولیه Setup and First Steps

• اولین جزء و پایه First Component and Prop

• یک ظاهر طراحی و اجزای بیشتر Styling and More Components

• اجزای هدر و کارت پایه Header and BaseCard Components

• اضافه کردن دکمه پایه Adding a Base Button

• مؤلفه‌های پویا و ویژگی Fallthrough Dynamic Components and the Fallthrough Attribute

• افزودن و استایل دادن به برگه ها Adding and Styling Tabs

• افزودن فرم Adding a Form

• واکشی ورودی کاربر Fetching User Input

• افزودن یک دیالوگ مودال Adding a Modal Dialog

• حذف موارد Deleting Items

• اضافه کردن “Teleport†Adding “Teleport”

تشکیل می دهد Forms

• معرفی ماژول Module Introduction

• V-Model و ورودی ها V-Model and Inputs

• کار با V-Model Modifiers و Numbers Working with V-Model Modifiers and Numbers

• V-Model و Dropdowns V-Model and Dropdowns

• استفاده از V-Model با چک باکس ها و دکمه های رادیویی Using V-Model with Checkboxes and Radio Buttons

• افزودن اعتبار سنجی فرم پایه Adding Basic Form Validation

• ساخت کامپوننت کنترل سفارشی Building a Custom Control Component

• استفاده از V-Model بر روی کامپوننت های سفارشی Using V-Model on Custom Components

• خلاصه ماژول Module Summary

ارسال درخواست های HTTP Sending HTTP Requests

• معرفی ماژول Module Introduction

• راه‌اندازی برنامه و دلیل نیاز به Backend Starting App and Why You Need a Backend

• اضافه کردن Backend Adding a Backend

• نحوه (نه) ارسال درخواست های HTTP How to (Not) Send HTTP Requests

• ارسال یک درخواست POST برای ذخیره داده ها Sending a POST Request to Store Data

• دریافت داده (درخواست دریافت) و تغییر داده های پاسخ Getting Data (GET Request) and Transforming Response Data

• بارگیری داده ها هنگام نصب کامپوننت Loading Data When a Component Mounts

• نمایش پیام “Loading…†Showing a “Loading…” Message

• مدیریت وضعیت «بدون داده». Handling the “No Data” State

• رسیدگی به خطاهای فنی/سمت مرورگر Handling Technical/Browser-Side Errors

• رسیدگی به پاسخ های خطا Handling Error Responses

• خلاصه ماژول Module Summary

مسیریابی: ساخت برنامه های کاربردی چند صفحه ای Routing: Building “Multi-Page” Single Page Applications

• معرفی ماژول Module Introduction

• مسیریابی: چه چیزی و چرا؟ Routing: What and Why?

• راه اندازی مسیریابی Routing Setup

• ثبت و ارائه مسیرها Registering and Rendering Routes

• پیمایش با Router-link Navigating with Router-link

• سبک دادن به پیوندهای فعال Styling Active Links

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

• انتقال داده با پارامترهای مسیر (بخش های پویا) Passing Data with Route Params (Dynamic Segments)

• مسیریابی و مسیرهای پویا Navigation and Dynamic Paths

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

• پاس دادن Params به عنوان Props Passing Params as Props

• تغییر مسیر و مسیرهای "Catch All". Redirecting and “Catch All” Routes

• استفاده از مسیرهای تودرتو Using Nested Routes

• سرگرمی بیشتر با مسیرهای نامگذاری شده و اشیاء مکان More Fun with Named Routes and Location Objects

• استفاده از Query Params Using Query Params

• ارائه چندین مسیر با نماهای روتر نامگذاری شده Rendering Multiple Routes with Named Router Views

• کنترل رفتار اسکرول Controlling Scroll Behavior

• معرفی گاردهای ناوبری Introducing Navigation Guards

• غواصی عمیق تر در گاردهای ناوبری Diving Deeper into Navigation Guards

• گارد جهانی «بعد از هرکدام». The Global “afterEach” Guard

• فراتر از ورود: نگهبانان مسیر را ترک کنید Beyond Entering: Route Leave Guards

• استفاده از فراداده مسیر Utilizing Route Metadata

• سازماندهی فایل های مسیر Organizing Route Files

• خلاصه Summary

انیمیشن ها و انتقال ها Animations and Transitions

• معرفی ماژول Module Introduction

• مبانی انیمیشن و انتقال CSS Animation Basics and CSS Transitions

• آشنایی با انیمیشن های CSS Understanding CSS Animations

• چرا «فقط CSS» کافی نیست؟ Why Is “Just CSS” Not Enough?

• پخش انیمیشن های CSS با کمک Vue Playing CSS Animations with Vue's Help

• استفاده از مولفه انتقال Using the Transition Component

• انیمیشن های CSS با مولفه انتقال CSS Animations with the Transition Component

• استفاده از نام‌های کلاس CSS سفارشی Using Custom CSS Class Names

• مثال: متحرک سازی یک مدال Example: Animating a Modal

• انتقال بین چندین عنصر Transitioning Between Multiple Elements

• استفاده از رویدادهای انتقال Using Transition Events

• ایجاد انتقال جاوا اسکریپت (به جای CSS) Building JavaScript Transitions (Instead of CSS)

• غیرفعال کردن CSS Transitions Disabling CSS Transitions

• شروع کار با لیست های متحرک Getting Started with Animated Lists

• متحرک کردن لیست ها با "گروه انتقال". Animating Lists with “Transition-Group”

• متحرک کردن حرکت آیتم لیست Animating List Item Movement

• متحرک سازی تغییرات مسیر Animating Route Changes

Vuex Vuex

• معرفی ماژول Module Introduction

• Vuex: چی و چرا؟ Vuex: What and Why?

• ایجاد و استفاده از فروشگاه Creating and Using a Store

• اتصال کامپوننت ها به حالت Connecting Components to State

• معرفی جهش - روشی بهتر برای تغییر داده ها Introducing Mutations - A Better Way of Changing Data

• انتقال داده ها به جهش با بارگذاری Passing Data to Mutations with Payloads

• معرفی Getters - روشی بهتر برای دریافت داده Introducing Getters - A Better Way of Getting Data

• اجرای کد Async با Actions Running Async Code with Actions

• درک عمل “Context†Understanding the Action “Context”

• استفاده از Mapper Helpers Using Mapper Helpers

• مثال: افزودن ایالات بیشتر Example: Adding More States

• سازماندهی فروشگاه خود با ماژول ها Organizing Your Store with Modules

• درک وضعیت ماژول محلی Understanding Local Module State

• ماژول های فضای نام Namespacing Modules

• ساختار کد Vuex و فایل ها Structuring Vuex Code and Files

• یک چالش! A Challenge!

• راه حل چالش – قسمت 1 Challenge Solution – Part 1

• راه حل چالش - قسمت 2 Challenge Solution – Part 2

• راه حل چالش – قسمت 3 Challenge Solution – Part 3

• خلاصه Summary

پروژه اصلی: "پیدا کردن یک مربی" برنامه وب Main Project: “Find a Coach” Web App

• معرفی ماژول Module Introduction

• برنامه ریزی پروژه/برنامه وب Planning the Project/Web App

• برنامه ریزی داده های مورد نیاز Planning the Data Requirements

• برنامه ریزی چیدمان/اجزاء Planning the Layout/Components

• ثبت مسیرها Registering Routes

• افزودن اجزای صفحه مسیر Adding Route Page Components

• کار بر روی چیدمان اصلی و استایل Working on the Main Layout and Styling

• سیم کشی صفحات Wiring Up Pages

• افزودن داده های Vuex و Coach Adding Vuex and Coach Data

• کار بر روی فهرست مربیان و موارد فهرست Working on the Coaches List and List Items

• افزودن چند مولفه پایه (کارت پایه، دکمه پایه، نشان پایه) Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

• ساخت مولفه جزئیات مربی Building the Coach Detail Component

• فیلترینگ مربیان Filtering Coaches

• ثبت نام به عنوان مربی: فرم Registering as a Coach: The Form

• اضافه کردن کوچ به Vuex Adding Coaches to Vuex

• افزودن اعتبار سنجی فرم Adding Form Validation

• کار بر روی فرم تماس Working on the Contact Form

• ذخیره سازی درخواست ها (پیام ها) با Vuex Storing Requests (Messages) with Vuex

• خروجی درخواست های دریافتی (پیام ها) Outputting Incoming Requests (Messages)

• فیلتر کردن درخواست‌ها برای مربی فعال Filtering Requests for the Active Coach

• ارسال یک درخواست PUT HTTP برای ذخیره داده های مربی Sending a PUT HTTP Request to Store Coach Data

• واکشی داده های مربی (دریافت درخواست HTTP) Fetching Coach Data (GET HTTP Request)

• ارائه یک اسپینر در حال بارگذاری Rendering a Loading Spinner

• اضافه کردن مدیریت خطای HTTP Adding HTTP Error Handling

• ارسال درخواست های کوچینگ با استفاده از درخواست های HTTP Sending Coaching Requests Using HTTP Requests

• ذخیره داده های پاسخ HTTP Caching HTTP Response Data

• اضافه کردن مسیر انتقال Adding Route Transitions

• صفحه و خلاصه "یافت نشد". The “Not Found” Page and Summary

Vue و احراز هویت Vue and Authentication

• معرفی ماژول Module Introduction

• احراز هویت در برنامه های Vue [یا هر برنامه تک صفحه ای (SPA)] چگونه کار می کند؟ How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?

• قفل کردن/محافظت از منابع باطن Locking/Protecting Backend Resources

• افزودن صفحه احراز هویت (ورود به سیستم و ثبت نام) Adding an Authentication Page (Login and Signup)

• آماده سازی Vuex Preparing Vuex

• افزودن یک اقدام و جریان "ثبت نام". Adding a “Signup” Action and Flow

• UX بهتر: بارگیری اسپینر و مدیریت خطا Better UX: Loading Spinner and Error Handling

• افزودن یک اکشن و جریان «ورود». Adding a “Login” Action and Flow

• پیوست کردن توکن به درخواست‌های خروجی Attaching the Token to Outgoing Requests

• به روز رسانی UI بر اساس وضعیت Auth Updating the UI Based on Auth State

• افزودن یک «خروج» Action and Flow Adding a “Logout” Action and Flow

• احراز هویت و مسیریابی (از جمله گاردهای ناوبری) Authentication and Routing (Including Navigation Guards)

• افزودن «ورود خودکار» Adding “Auto Login”

• افزودن «خروج خودکار». Adding “Auto Logout”

• خلاصه Summary

بهینه سازی و استقرار برنامه های Vue Optimizing and Deploying Vue Apps

• معرفی ماژول Module Introduction

• چه چیزی را مستقر کنیم؟ What to Deploy?

• بهینه سازی: با استفاده از اجزای ناهمزمان Optimization: Using Asynchronous Components

• ساخت پروژه برای تولید Building the Project for Production

• استقرار یک برنامه Vue Deploying a Vue App

Composition API – جایگزینی API Options The Composition API – Replacing the Options API

• معرفی ماژول Module Introduction

• Composition API کدام مشکل را حل می کند؟ Which Problem Does the Composition API Solve?

• جایگزینی “Data†با Refs Replacing “Data” with “Refs”

• ساختن اجسام «واکنشی». Building “Reactive” Objects

• واکنش پذیری: شیرجه عمیق Reactivity: A Deep Dive

• جایگزینی «روش‌ها» با توابع منظم Replacing “Methods” with Regular Functions

• جایگزینی «ویژگی‌های محاسبه‌شده» با تابع «محاسبه‌شده» Replacing “Computed Properties” with the “Computed” Function

• دو طرفه Binding و Composition API Two-Way Binding and the Composition API

• کار با Watchers Working with Watchers

• اولین خلاصه A First Summary

• نحوه استفاده از Refs الگو How to Use Template Refs

• کامپوننت ها، Props و Composition API Components, Props, and the Composition API

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

• کار با ارائه/تزریق Working with Provide/Inject

• Lifecycle Hooks در Composition API Lifecycle Hooks in the Composition API

• مهاجرت از Options API به Composition API - یک پروژه نمونه Migrating from Options API to Composition API - An Example Project

• مهاجرت یک جزء اول Migrating a First Component

• مهاجرت یک جزء بزرگ Migrating a Big Component

• مهاجرت اجزای باقیمانده Migrating the Remaining Components

• Routing، Params و Composition API Routing, Params, and the Composition API

• Route and Router Objects و Composition API Route and Router Objects and the Composition API

• استفاده از Vuex با Composition API Using Vuex with the Composition API

• خلاصه Summary

قابلیت استفاده مجدد: ترکیبات و توابع ترکیب سفارشی Reusing Functionality: Mixins and Custom Composition Functions

• معرفی ماژول Module Introduction

• مفاهیم قابلیت استفاده مجدد Reusability Concepts

• استفاده از Mixins Using Mixins

• ادغام مخلوط ها Merging Mixins

• میکس های جهانی Global Mixins

• مضرات Mixins Disadvantages of Mixins

• Hooks/Composable سفارشی و Composition API Custom Hooks/Composable and the Composition API

• توابع ترکیب سفارشی بیشتر More Custom Composition Functions

• چرا Hooks/Composable Beat Mixins؟ Why Hooks/Composable Beat Mixins?

• مثال: ایجاد قلاب «جستجو». Example: Creating a “Search” Hook

• گوچاهای قلاب سفارشی Custom Hooks Gotchas

• افکار بیشتر در مورد قلاب های سفارشی/قابل ترکیب More Thoughts on Custom Hooks/Composable

• مثال: یک قلاب «مرتب سازی» سفارشی Example: A Custom “Sort” Hook

جمع بندی و مراحل بعدی Roundup and Next Steps

• جمع بندی دوره و مراحل بعدی Course Roundup and Next Steps

Vue 2 به Vue 3 Migration Vue 2 to Vue 3 Migration

• Vue 3 - نمای کلی Vue 3 - Overview

• تغییرات مهم و مراحل مهاجرت Important Changes and Migration Steps

• Vue 3: ویژگی های جدید Vue 3: New Features

• New Composition API (اختیاری) The New Composition API (Optional)

• درباره این دوره و Vue 3 About This Course and Vue 3

شروع به کار [VUE2] Getting Started [VUE2]

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

• ایجاد اولین برنامه Vue.js شما Creating Your First Vue.js Application

• گسترش برنامه Vue.js Extending the Vue.js Application

• ساختار دوره Course Structure

• از تمام منابع دوره استفاده کنید! Take Advantage of All Course Resources!

• Vue.js را به صورت محلی تنظیم کنید Set Up Vue.js Locally

استفاده از Vue.js برای تعامل با Document Object Model (DOM) [VUE2] Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]

• معرفی ماژول Module Introduction

• آشنایی با قالب های Vue.js Understanding Vue.js Templates

• نحو و نمونه Vue.js چگونه با هم کار می کنند How the Vue.js Template Syntax and Instance Work Together

• دسترسی به داده ها در نمونه Vue Accessing Data in the Vue Instance

• صفات الزام آور Binding Attributes

• درک و استفاده از دستورالعمل ها Understanding and Using Directives

• Rendering را با V-Once غیرفعال کنید Disable Re-Rendering with V-Once

• چگونه HTML خام را خروجی کنیم؟ How to Output Raw HTML?

• گوش دادن به رویدادها Listening to Events

• دریافت داده های رویداد از شی رویداد Getting Event Data from the Event Object

• گذراندن استدلال های خود با رویدادها Passing Your Own Arguments with Events

• اصلاح یک رویداد - با اصلاح کننده های رویداد Modifying an Event - with Event Modifiers

• گوش دادن به رویدادهای صفحه کلید Listening to Keyboard Events

• نوشتن کد جاوا اسکریپت در قالب ها Writing JavaScript Code in the Templates

• استفاده از اتصال دو طرفه Using Two-Way Binding

• نوشتن کد جاوا اسکریپت در قالب ها Writing JavaScript Code in the Templates

• واکنش به تغییرات با ویژگی های محاسبه شده Reacting to Changes with Computed Properties

• جایگزینی برای ویژگی های محاسبه شده: مشاهده تغییرات An Alternative to Computed Properties: Watching for Changes

• صرفه جویی در زمان با حروف کوتاه Saving Time with Shorthands

• یک ظاهر طراحی پویا با کلاس های CSS - اصول Dynamic Styling with CSS Classes – Basics

• استایل پویا با کلاس های CSS - با استفاده از اشیاء Dynamic Styling with CSS Classes - Using Objects

• استایل پویا با کلاس‌های CSS - استفاده از نام‌ها تنظیم سبک‌ها به صورت پویا (بدون کلاس‌های CSS) Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)

• استایل دادن به عناصر با نحو آرایه Styling Elements with the Array Syntax

• بسته بندی ماژول Module Wrap Up

استفاده از فهرست‌های شرطی و رندر [VUE2] Using Conditionals and Rendering Lists [VUE2]

• معرفی ماژول Module Introduction

• رندر شرطی با V-If Conditional Rendering with V-If

• استفاده از V-If Syntax جایگزین Using an Alternative V-If Syntax

• آن را با V-Show جدا نکنید Don't Detach it with V-Show

• رندر کردن لیست ها با V-For Rendering Lists with V-For

• دریافت شاخص فعلی Getting the Current Index

• استفاده از V-For Syntax جایگزین Using an Alternative V-For Syntax

• حلقه زدن از طریق اشیاء Looping through Objects

• حلقه زدن از طریق فهرست اعداد Looping through a List of Numbers

• ردیابی عناصر در حین استفاده از V-For Keeping Track of Elements While Using V-For

• بسته بندی ماژول Module Wrap Up

پروژه اولین دوره - قاتل هیولا [VUE2] First Course Project - The Monster Slayer [VUE2]

• مقدمه و چالش Introduction and Challenge

• راه اندازی پروژه دوره Setting Up the Course Project

• ایجاد نمونه Vue و استایل دادن به Healthbars Creating the Vue Instance and Styling the Healthbars

• نمایش کنترل های پخش کننده به صورت مشروط Showing the Player Controls Conditionally

• پیاده سازی یک روش "شروع بازی". Implementing a “Start Game” Method

• پیاده سازی یک روش "حمله". Implementing an “Attack” Method

• کد بهتری بنویسید - زمان بازآفرینی است! Write better Code - Time for Refactoring!

• اجرای "حمله ویژه". Implementing a “Special Attack”

• اجرای یک روش "Heal". Implementing a “Heal” Method

• اتمام دکمه های اکشن Finishing the Action Buttons

• ایجاد Action Log Creating an Action Log

• چاپ گزارش (v-for) Printing the Log (v-for)

• اتمام گزارش Finishing the Log

• حالت دادن به گزارش مشروط Styling the Log Conditionally

• بسته شدن Wrap Up

درک نمونه Vue.js [VUE2] Understanding the Vue.js Instance [VUE2]

• معرفی ماژول Module Introduction

• برخی از اصول اولیه در مورد نمونه Vue.js Some Basics about the Vue.js Instance

• استفاده از چندین نمونه Vue Using Multiple Vue Instances

• دسترسی به نمونه Vue از خارج Accessing the Vue Instance from Outside

• Vue.js چگونه داده ها و روش های شما را مدیریت می کند How Vue.js Manages Your Data and Methods

• A r به $el و $data نگاه کنید A r Look at $el and $data

• قرار دادن $refs و استفاده از آنها در قالب های خود Placing $refs and Using Them on Your Templates

• کجا درباره Vue API بیشتر بیاموزیم؟ Where to Learn More about the Vue API?

• نصب قالب Mounting a Template

• استفاده از کامپوننت ها Using Components

• محدودیت های برخی از قالب ها Limitations of Some Templates

• Vue.js چگونه مدل شیء سند (DOM) را به روز می کند؟ How Vue.js Updates the Document Object Model (DOM)?

• چرخه حیات نمونه Vue.js The Vue.js Instance Lifecycle

• چرخه حیات نمونه Vue.js در عمل The Vue.js Instance Lifecycle in Practice

• بسته بندی ماژول Module Wrap Up

حرکت به یک جریان کاری توسعه واقعی با Webpack و Vue CLI [VUE2] Moving to a “Real” Development Workflow with Webpack and Vue CLI [VUE2]

• معرفی ماژول Module Introduction

• چرا به سرور توسعه نیاز دارید؟ Why Do You Need a Development Server?

• «روی کار توسعه» به چه معناست؟ What Does “Development Workflow” Mean?

• استفاده از Vue CLI برای ایجاد پروژه ها Using the Vue CLI to Create Projects

• نصب Vue CLI و ایجاد یک پروژه جدید Installing the Vue CLI and Creating a New Project

• نمای کلی ساختار پوشه Webpack Template Overview of the Webpack Template Folder Structure

• درک فایل های “.vueâ € Understanding the “.vue” Files

• درک شیء در فایل Vue Understanding the Object in the Vue File

• چگونه اپلیکیشن خود را برای تولید بسازید How to Build Your App for Production

• بسته بندی ماژول Module Wrap Up

مقدمه ای بر کامپوننت ها [VUE2] An Introduction to Components [VUE2]

• معرفی ماژول Module Introduction

• مقدمه ای بر کامپوننت ها An Introduction to Components

• ذخیره داده ها در کامپوننت ها با روش داده Storing Data in Components with the Data Method

• ثبت قطعات به صورت محلی و جهانی Registering Components Locally and Globally

• “Root Component†در فایل App.vue “Root Component” in the App.vue File

• ایجاد کامپوننت Creating a Component

• استفاده از کامپوننت ها Using Components

• حرکت به یک ساختار پوشه بهتر Moving to a Better Folder Structure

• نحوه نامگذاری برچسب های مؤلفه (انتخاب کنندگان) How to Name Your Component Tags (Selectors)

• Scoping Component Styles Scoping Component Styles

• بسته بندی ماژول Module Wrap Up

برقراری ارتباط بین مؤلفه ها [VUE2] Communicating Between Components [VUE2]

• معرفی ماژول Module Introduction

• مشکلات ارتباطی Communication Problems

• استفاده از Props for Parent => Child Communication Using Props for Parent => Child Communication

• نامگذاری "پروپاس". Naming “props”

• استفاده از «Props» در مؤلفه کودک Using “Props” in the Child Component

• اعتبار سنجی “Props†Validating “Props”

• استفاده از رویدادهای سفارشی برای کودک => ارتباط والدین Using Custom Events for Child => Parent Communication

• درک جریان داده های یک طرفه Understanding Unidirectional Data Flow

• برقراری ارتباط با توابع پاسخ به تماس Communicating with Callback Functions

• ارتباط بین اجزای خواهر و برادر Communication between Sibling Components

• استفاده از اتوبوس رویداد برای ارتباط Using an Event Bus for Communication

• متمرکز کردن کد در گذرگاه رویداد Centralizing Code in an Event Bus

• بسته شدن Wrap Up

استفاده از مؤلفه پیشرفته [VUE2] Advanced Component Usage [VUE2]

• معرفی ماژول Module Introduction

• راه اندازی پروژه ماژول Setting Up the Module Project

• محتوای عبور - راه حل کمتر از حد مطلوب Passing Content - The Suboptimal Solution

• ارسال محتوا با اسلات Passing Content with Slots

• محتوای اسلات چگونه کامپایل و سبک می شود؟ How Slot Content Gets Compiled and Styled?

• استفاده از اسلات های متعدد (اسلات های نامگذاری شده) Using Multiple Slots (Named Slots)

• اسلات های پیش فرض Default Slots

• خلاصه ای از اسلات ها A Summary on Slots

• تعویض چندین کامپوننت با کامپوننت های پویا Switching Multiple Components with Dynamic Components

• درک رفتار مؤلفه های پویا Understanding Dynamic Component Behavior

• زنده نگه داشتن اجزای پویا Keeping Dynamic Components Alive

• قلاب چرخه حیات کامپوننت پویا Dynamic Component Lifecycle Hooks

• بسته شدن Wrap Up

پروژه دوره دوم - نقل قول های شگفت انگیز [VUE2] Second Course Project - Wonderful Quotes [VUE2]

• معرفی ماژول Module Introduction

• راه اندازی پروژه Setting Up the Project

• راه اندازی برنامه Initializing the Application

• ایجاد اجزای برنامه Creating the Application Components

• انتقال داده با Props و Slots Passing Data with Props and Slots

• اجازه دادن به کاربران برای ایجاد نقل قول با یک جزء NewQuote Allowing Users to Create Quotes with a NewQuote Component

• اضافه کردن نقل قول با رویدادهای سفارشی Adding Quotes with Custom Events

• افزودن جعبه اطلاعات Adding an Info Box

• امکان حذف نقل قول Allowing for Quote Deletion

• کنترل نقل قول ها با نوار پیشرفت Controlling Quotes with a Progress Bar

• کارهای پایانی و مدیریت دولتی Finishing Touches and State Management

مدیریت ورودی کاربر با فرم‌ها [VUE2] Handling User Input with Forms [VUE2]

• معرفی ماژول Module Introduction

• یک فرم پایه <ورودی> صحافی A Basic <input> Form Binding

• گروه‌بندی داده‌ها و پر کردن ورودی‌ها Grouping Data and Pre-Populating Inputs

• تغییر ورودی کاربر با اصلاح کننده های ورودی Modifying User Input with Input Modifiers

• اتصال <textarea> و مدیریت ورودی کاربر Binding <textarea> and Handling User Input

• استفاده از چک باکس ها و ذخیره داده ها در آرایه ها Using Checkboxes and Saving Data in Arrays

• با استفاده از دکمه های رادیویی Using Radio Buttons

• مدیریت بازشوها با <select> و <option> Handling Dropdowns with <select> and <option>

• V-Model چه کاری انجام می دهد و چگونه یک کنترل سفارشی ایجاد کنیم What V-Model Does and How to Create a Custom Control

• ایجاد یک کنترل سفارشی (ورودی) Creating a Custom Control (Input)

• ارسال فرم Submitting a Form

• بسته شدن Wrap Up

استفاده و ایجاد دستورالعمل ها [VUE2] Using and Creating Directives [VUE2]

• معرفی ماژول Module Introduction

• درک دستورالعمل ها Understanding Directives

• دستورالعمل ها چگونه کار می کنند؟ توابع قلاب How Directives Work? Hook Functions

• ایجاد یک دستورالعمل ساده Creating a Simple Directive

• انتقال ارزش ها به دستورالعمل های سفارشی Passing Values to Custom Directives

• انتقال استدلال به دستورالعمل های سفارشی Passing Arguments to Custom Directives

• اصلاح یک دستورالعمل سفارشی با اصلاح کننده ها Modifying a Custom Directive with Modifiers

• دستورالعمل های سفارشی - خلاصه Custom Directives - A Summary

• ثبت دستورالعمل ها به صورت محلی Registering Directives Locally

• استفاده از چند اصلاح کننده Using Multiple Modifiers

• انتقال ارزش های پیچیده تر به دستورالعمل ها Passing More Complex Values to Directives

• بسته شدن Wrap Up

بهبود برنامه شما با فیلترها و ترکیبات [VUE2] Improving your App with Filters and Mixins [VUE2]

• معرفی ماژول Module Introduction

• ایجاد یک فیلتر محلی Creating a Local Filter

• فیلترهای جهانی چیست و چگونه چندین فیلتر را زنجیر کنیم؟ What are Global Filters and How to Chain Multiple Filters?

• یک جایگزین (اغلب بهتر) برای فیلترها: خصوصیات محاسبه شده An (Often Better) Alternative to Filters: Computed Properties

• درک ترکیبات Understanding Mixins

• ایجاد و استفاده از Mixins Creating and Using Mixins

• چگونه مخلوط ها ادغام می شوند How Mixins Get Merged

• ایجاد یک میکس جهانی (مورد خاص!) Creating a Global Mixin (Special Case!)

• ترکیبات و دامنه Mixins and Scope

• بسته شدن Wrap Up

افزودن انیمیشن‌ها و انتقال‌ها [VUE2] Adding Animations and Transitions [VUE2]

• معرفی ماژول Module Introduction

• درک انتقال Understanding Transitions

• تهیه کد برای استفاده از انتقال Preparing a Code to Use Transitions

• راه اندازی یک انتقال Setting Up a Transition

• اختصاص کلاس های CSS برای انتقال Assigning CSS Classes for Transitions

• ایجاد یک انتقال “Fadeâ € با ویژگی CSS Transition Creating a “Fade” Transition with the CSS Transition Property

• ایجاد یک انتقال "اسلاید" با ویژگی انیمیشن CSS Creating a “Slide” Transition with the CSS Animation Property

• ترکیب ویژگی های انتقال و انیمیشن Mixing Transition and Animation Properties

• انیمیشن V-If و V-Show Animating V-If and V-Show

• تنظیم یک انیمیشن اولیه (در بارگذاری). Setting Up an Initial (On-Load) Animation

• استفاده از نام های مختلف کلاس CSS Using Different CSS Class Names

• استفاده از نام ها و ویژگی های پویا Using Dynamic Names and Attributes

• انتقال بین عناصر چندگانه (نظریه) Transitioning between Multiple Elements (Theory)

• انتقال بین عناصر چندگانه (تمرین) Transitioning between Multiple Elements (Practice)

• گوش دادن به Transition Event Hooks Listening to Transition Event Hooks

• آشنایی با انیمیشن های جاوا اسکریپت Understanding JavaScript Animations

• حذف CSS از انیمیشن شما Excluding CSS from your Animation

• ساخت انیمیشن در جاوا اسکریپت Creating an Animation in JavaScript

• متحرک سازی اجزای پویا Animating Dynamic Components

• متحرک سازی لیست ها با <transition-group> Animating Lists with <transition-group>

• استفاده از <transition-group> - Preparations Using <transition-group> - Preparations

• استفاده از <transition-group> برای متحرک کردن لیست Using <transition-group> to Animate a List

• درک اپلیکیشن Understanding the App

• ایجاد اپلیکیشن Creating the App

• اضافه کردن انیمیشن ها Adding Animations

• بسته شدن Wrap Up

اتصال به سرورها از طریق HTTP - با استفاده از Vue-Resource [VUE2] Connecting to Servers through HTTP - Using Vue-Resource [VUE2]

• معرفی ماژول Module Introduction

• دسترسی به HTTP از طریق Vue-Resource – Setup Accessing HTTP through Vue-Resource – Setup

• ایجاد اپلیکیشن و راه اندازی سرور (Firebase) Creating an Application and Setting Up a Server (Firebase)

• ارسال اطلاعات به سرور (ارسال درخواست POST) POST Data to a Server (Sending a POST Request)

• ارسال و تبدیل داده ها (ارسال یک درخواست GET) Sending and Transforming Data (Sending a GET Request)

• پیکربندی Vue-Resource در سطح جهانی Configuring Vue-Resource Globally

• رهگیری درخواست ها Intercepting Requests

• رهگیری پاسخ ها Intercepting Responses

• «منبع» در Vue-Resource از کجا می آید Where the “Resource” in Vue-Resource Comes From

• ایجاد منابع سفارشی Creating Custom Resources

• منابع در مقابل درخواست های HTTP â €œNormalâ € Resources Versus “Normal” HTTP Requests

• آشنایی با URL های قالب Understanding Template URLs

• بسته شدن Wrap Up

مسیریابی در یک برنامه Vue.js [VUE2] Routing in a Vue.js Application [VUE2]

• معرفی ماژول Module Introduction

• راه اندازی روتر Vue.js (روتر Vue) Setting Up the Vue.js Router (Vue-router)

• راه اندازی و بارگیری مسیرها Setting Up and Loading Routes

• درک حالت های مسیریابی (هش در مقابل سابقه) Understanding Routing Modes (Hash Versus History)

• پیمایش با پیوندهای روتر Navigating with Router Links

• سبک دادن به پیوندهای فعال Styling Active Links

• پیمایش از یک کد (ناوبری ضروری) Navigating from a Code (Imperative Navigation)

• تنظیم پارامترهای مسیر Setting Up Route Parameters

• واکشی و استفاده از پارامترهای مسیر Fetching and Using Route Parameters

• واکنش به تغییرات در پارامترهای مسیر Reacting to Changes in Route Parameters

• تنظیم مسیرهای کودک (مسیرهای تودرتو) Setting Up Child Routes (Nested Routes)

• پیمایش به مسیرهای تودرتو Navigating to Nested Routes

• پویاتر کردن پیوندهای روتر Making Router Links More Dynamic

• روشی بهتر برای ایجاد پیوندها - با مسیرهای نامگذاری شده A Better Way of Creating Links - With Named Routes

• استفاده از پارامترهای پرس و جو Using Query Parameters

• نماهای چندگانه روتر (نماهای روتر نامگذاری شده) Multiple Router Views (Named Router Views)

• تغییر مسیر Redirecting

• راه اندازی «Catch All» Routes/Waldcards Setting Up “Catch All” Routes/Wildcards

• متحرک سازی انتقال مسیر Animating Route Transitions

• عبور از هش فرگمنت Passing the Hash Fragment

• کنترل رفتار اسکرول Controlling the Scroll Behavior

• حفاظت از مسیرها با نگهبانان Protecting Routes with Guards

• با استفاده از گارد “BeforeEnter†Using the “BeforeEnter” Guard

• با استفاده از گارد «پیش از ترک». Using the “BeforeLeave” Guard

• Loading Routes Lazily Loading Routes Lazily

• بسته شدن Wrap Up

مدیریت بهتر حالت با Vuex [VUE2] Better State Management with Vuex [VUE2]

• معرفی ماژول Module Introduction

• چرا ممکن است به یک مدیریت دولتی متفاوت نیاز باشد؟ Why a Different State Management may Be Needed

• درک "دولت متمرکز". Understanding “Centralized State”

• استفاده از دولت متمرکز Using the Centralized State

• چرا یک دولت متمرکز به تنهایی آن را حل نمی کند؟ Why a Centralized State Alone Won't Fix it

• درک گترها Understanding Getters

• استفاده از Getters Using Getters

• Mapping Getters to Properties Mapping Getters to Properties

• درک جهش Understanding Mutations

• استفاده از جهش Using Mutations

• چرا جهش ها باید به صورت همزمان اجرا شوند؟ Why Mutations Have to Run Synchronously

• چگونه اقدامات جهش ها را بهبود می بخشد How Actions Improve Mutations

• استفاده از Actions Using Actions

• نگاشت اقدامات به روش ها Mapping Actions to Methods

• خلاصه ای از Vuex A Summary of Vuex

• دو طرفه صحافی (v-model) و Vuex Two-Way Binding (v-model) and Vuex

• بهبود ساختار پوشه ها Improving Folder Structures

• مدولار کردن مدیریت دولتی Modularizing the State Management

• استفاده از فایل های جداگانه Using Separate Files

• استفاده از فضاهای نام برای جلوگیری از مشکلات نامگذاری Using Namespaces to Avoid Naming Problems

• بسته شدن Wrap Up

پروژه نهایی - معامله‌گر سهام [VUE2] Final Project - The Stock Trader [VUE2]

• معرفی پروژه Project Introduction

• راه اندازی و برنامه ریزی پروژه Project Setup and Planning

• ایجاد اولین مؤلفه ها Creating the First Components

• راه‌اندازی مسیرهای پروژه Set Up Project Routes

• اضافه کردن هدر و ناوبری Adding a Header and Navigation

• برنامه ریزی مراحل بعدی Planning the Next Steps

• ایجاد اجزای سهام Creating Stocks Components

• افزودن دکمه «خرید». Adding a “Buy” Button

• راه اندازی مدیریت Vuex State Setting Up the Vuex State Management

• اضافه کردن یک ماژول نمونه کارها به Vuex Adding a Portfolio Module to Vuex

• کار بر روی سهام نمونه کارها Working on the Portfolio Stocks

• اتصال پورتفولیو با Vuex Connecting the Portfolio with Vuex

• زمان رفع برخی از خطاها است Time to fix some Errors

• نمایش وجوه Displaying the Funds

• افزودن برخی چک های سفارش Adding Some Order Checks

• با فیلترها وجوه را زیباتر کنید Making Funds Look Nicer with Filters

• پایان روز - تصادفی کردن سهام Ending the Day - Randomizing Stocks

• متحرک سازی انتقال مسیر Animating the Route Transitions

• ذخیره و واکشی داده ها - اضافه کردن یک کشویی Saving and Fetching Data - Adding a Dropdown

• راه اندازی Vue-Resource و Firebase Setting Up Vue-Resource and Firebase

• ذخیره داده (درخواست PUT) Saving Data (PUT Request)

• واکشی داده ها (درخواست دریافت) Fetching Data (GET Request)

• تست و رفع اشکال Testing and Bug Fixes

• جمع بندی پروژه Project Wrap Up

• امتیاز: اشکال زدایی Vuex با ابزارهای توسعه دهنده Vue Bonus: Debugging Vuex with Vue Developer Tools

استقرار یک برنامه Vue.js [VUE2] Deploying a Vue.js Application [VUE2]

• معرفی ماژول Module Introduction

• آماده شدن برای استقرار Preparing for Deployment

• استقرار برنامه (مثال: AWS S3) Deploying the App (Example: AWS S3)

امتیاز: استفاده از Axios به جای Vue-Resource [VUE2] Bonus: Using Axios Instead of Vue-Resource [VUE2]

• درباره این بخش About This Section

• معرفی ماژول Module Introduction

• راه اندازی پروژه Project Setup

• راه اندازی Axios Axios Setup

• ارسال درخواست POST Sending a POST Request

• ارسال درخواست GET Sending a GET Request

• دسترسی و استفاده از داده های پاسخ Accessing and Using Response Data

• تنظیم یک پیکربندی درخواست جهانی Setting a Global Request Configuration

• استفاده از رهگیرها Using Interceptors

• نمونه های سفارشی Axios Custom Axios Instances

• بسته شدن Wrap Up

امتیاز: احراز هویت در برنامه های Vue Bonus: Authentication in Vue Apps

• بخش مقدمه Section Introduction

• معرفی ماژول Module Introduction

• چگونه احراز هویت در برنامه های تک صفحه ای (SPA) کار می کند How Authentication Works in Single-Page Applications (SPAs)

• راه اندازی پروژه Project Setup

• اضافه کردن ثبت نام کاربر Adding User Sign-Up

• افزودن ورود کاربر (ورود به سیستم) Adding User Sign-In (Login)

• استفاده از Vuex برای ارسال درخواست های احراز هویت Using Vuex to Send Auth Requests

• ذخیره داده های Auth در Vuex Storing Auth Data in Vuex

• دسترسی به منابع دیگر از Vuex Accessing Other Resources from Vuex

• ارسال توکن به Backend Sending the Token to the Backend

• مسیرهای حفاظتی (گارد مجوز) Protecting Routes (Auth Guard)

• به روز رسانی حالت رابط کاربری (بر اساس وضعیت احراز هویت) Updating the UI State (Based on Authentication State)

• افزودن خروج کاربر Adding User Logout

• افزودن خروج خودکار Adding Auto Logout

• افزودن ورود خودکار Adding Auto Login

• بسته شدن Wrap Up