آموزش Vue - راهنمای کامل (شامل Router & 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 A First App With Just JavaScript

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

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

• Vue در مقابل "Vanilla JavaScript" (فقط جاوا اسکریپت) Vue vs "Vanilla JavaScript" (just JavaScript)

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

• طرح کلی دوره و آنچه در دوره وجود دارد Course Outline & What's In The Course

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• منابع ماژول Module Resources

مفاهیم اولیه و اصلی - تعامل DOM با Vue Basics & Core Concepts - 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 of a Vue App

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

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

• زمان تمرین: اتصال داده ها Time to Practice: Data Binding

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

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

• کار با آرگومان های رویداد Working with Event Arguments

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

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

• قفل کردن محتوا با v-one Locking Content with v-once

• زمان برای تمرین: اتصال رویداد Time to Practice: Event Binding

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

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

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

• کار با Watchers Working with Watchers

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

• v-bind و v-on shorthands v-bind and v-on Shorthands

• زمان تمرین: واکنش پذیری Time to Practice: Reactivity

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

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

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

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

• زمان تمرین: یک ظاهر طراحی پویا Time to Practice: Dynamic Styling

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

• منابع ماژول Module Resources

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

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

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

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

• v-اگر، v-else و v-else-اگر 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

• فهرست ها و کلیدها Lists & Keys

• زمان تمرین: محتوا و فهرست های مشروط Time to Practice: Conditional Content & Lists

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

• منابع ماژول Module Resources

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

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

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

• به روز رسانی نوارهای سلامت Updating the Health Bars

• اضافه کردن "حمله ویژه" Adding a "Special Attack"

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

• اضافه کردن یک صفحه "بازی تمام شده". Adding a "Game Over" Screen

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

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

• منابع ماژول Module Resources

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 vs Multiple Apps

• درک الگوها Understanding Templates

• کار با Refs Working with Refs

• چگونه Vue DOM را به روز می کند How Vue Updates the DOM

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

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

• منابع ماژول Module Resources

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

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

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

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

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

• برنامه های چندگانه Vue در مقابل چندین مؤلفه Multiple Vue Apps vs Multiple Components

• منابع ماژول Module Resources

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

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

• چرا ما به یک سرور توسعه نیاز داریم؟ Why We Need A Development Server

• چرا ما یک تجربه توسعه دهنده بهتر می خواهیم؟ Why We Want A Better Developer Experience

• تعمیر سرویس اجرای npm (Vue CLI) Fixing npm run serve (Vue CLI)

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

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

• بازرسی کد Vue و فایل‌های ".vue". Inspecting the Vue Code & ".vue" Files

• افزودن پسوند "Vetur" به VS Code Adding the "Vetur" Extension to VS Code

• اطلاعات بیشتر در مورد ".vue" Files More on ".vue" Files

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

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

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

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

• یک اضافه کوچک A Small Addition

• یک راه اندازی جایگزین - با استفاده از "npm init" و Volar An Alternative Setup - using "npm init" & Volar

• منابع ماژول Module Resources

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

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

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

• رفتار سرپایی و تجهیزات در حال تغییر Prop Behavior & Changing Props

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

• ارزش های Prop پشتیبانی شده Supported Prop Values

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

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

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

• Prop/Event Fallthrough & Binding All Props Prop / Event Fallthrough & Binding All Props

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

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

• زمان تمرین: وسایل و رویدادهای سفارشی Time to Practice: Props & Custom Events

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

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

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

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

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

• منابع ماژول Module Resources

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

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

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

• جهانی در مقابل مؤلفه های محلی Global vs Local Components

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

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

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

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

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

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

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

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

• به کار بردن آنچه می دانیم و یک مشکل Applying What We Know & A Problem

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

• کار با Fragments Working with Fragments

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

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

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

• منابع ماژول Module Resources

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

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

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

• اولین اجزا و لوازم جانبی First Components & Props

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

• اجزای سربرگ و کارت پایه Header & BaseCard Components

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

• اجزای پویا و سقوط صفت Dynamic Components & Attribute Fallthrough

• افزودن و شکل دادن به برگه ها Adding & Styling Tabs

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

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

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

• حذف موارد Deleting Items

• اضافه کردن "Teleport" Adding "Teleport"

• منابع ماژول Module Resources

تشکیل می دهد Forms

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

• v-model & inputs v-model & Inputs

• کار با V-model Modifiers and Numbers Working with v-model Modifiers and Numbers

• v-model و dropdowns v-model and Dropdowns

• استفاده از v-model با چک باکس ها و دکمه های رادیویی Using v-model with Checkboxes & Radiobuttons

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

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

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

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

• منابع ماژول Module Resources

ارسال درخواست Http Sending Http Requests

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

• شروع برنامه و چرا ما به Backend نیاز داریم Starting App & Why we need a Backend

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

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

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

• درخواست‌های Http و روش‌های Http (افعال) Http Requests & Http Methods (Verbs)

• استفاده از Axios به جای "fetch()" Using Axios Instead Of "fetch()"

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

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

• نمایش پیام "در حال بارگیری...". Showing a "Loading..." Message

• مدیریت وضعیت "بدون داده". Handling the "No Data" State

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

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

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

• منابع ماژول Module Resources

مسیریابی: ساخت اپلیکیشن های تک صفحه ای "چند صفحه". Routing: Building "Multi-Page" Single Page Applications

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

• چی چرا؟ What & Why?

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

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

• پیمایش با روتر لینک Navigating with router-link

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

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

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

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

• یک اشکال Vue A Vue Bug

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

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

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

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

• سرگرمی بیشتر با مسیرهای نامگذاری شده و اشیاء مکان More Fun with Named Routes & 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

• منابع ماژول Module Resources

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

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

• مبانی انیمیشن و انتقال CSS Animation Basics & 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"

• حرکت آیتم فهرست را متحرک کنید Animate List Item Movement

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

• نکته مهم در مورد تغییر مسیر متحرک An Important Note on Animated Route Changes

• منابع ماژول Module Resources

Vuex Vuex

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

• چی چرا؟ What & Why?

• ایجاد و استفاده از فروشگاه Creating & 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

• درک کنش "زمینه" Understanding the Action "Context"

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

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

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

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

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

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

• یک چالش! A Challenge!

• راه حل چالش (1/3) Challenge Solution (1/3)

• راه حل چالش (2/3) Challenge Solution (2/3)

• راه حل چالش (3/3) Challenge Solution (3/3)

• خلاصه Summary

• منابع ماژول Module Resources

پروژه اصلی: برنامه وب "پیدا کردن یک مربی". 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 & 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 Http Requests

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

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

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

• منابع ماژول Module Resources

Vue & Authentication Vue & Authentication

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

• چگونه احراز هویت در برنامه های Vue (یا هر SPA) کار می کند How Authentication Works in Vue Apps (or any SPA)

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

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

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

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

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

• افزودن یک اقدام و جریان "ورود". Adding a "Login" Action & Flow

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

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

• افزودن یک اقدام و جریان "خروج". Adding a "Logout" Action & Flow

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

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

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

• خلاصه Summary

• منابع ماژول Module Resources

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

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

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

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

• توجه: اجزای غیرهمگام و مسیریابی Note: Async Components & Routing

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

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

• منابع ماژول Module Resources

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

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

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

• جایگزینی "داده" با "refs" Replacing "data" with "refs"

• جایگزینی متد setup(). Replacing the setup() Method

• ساخت اشیاء "واکنش پذیر". Building "reactive" Objects

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

• جایگزینی "روش ها" با توابع منظم Replacing "methods" with Regular Functions

• زمان تمرین: داده ها و توابع Time to Practice: Data & Functions

• جایگزینی "ویژگی های محاسبه شده" با تابع "محاسبه شده". Replacing "Computed Properties" with the "computed" Function

• Two-Way-Binding و Composition API Two-Way-Binding and the Composition API

• کار با Watchers Working with Watchers

• زمان تمرین: بلوک‌های اصلی API ترکیبی Time to Practice: Composition API Core Building Blocks

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

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

• کامپوننت ها، لوازم جانبی و API ترکیب Components, Props & The Composition API

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

• کار با Provide/Inject 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 & The Composition API Routing, Params & The Composition API

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

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

• خلاصه Summary

• منابع ماژول Module Resources

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

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

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

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

• درک Mixin Merging Understanding Mixin Merging

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

• مضرات Mixins Disadvantages of Mixins

• قلاب های سفارشی/Composables & The Composition API Custom Hooks / Composables & The Composition API

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

• چرا Hooks/Composables Beat Mixins Why Hooks / Composables Beat Mixins

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

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

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

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

• منابع ماژول Module Resources

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

• با تشکر از حضور در دوره! Thanks for being part of the course!

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

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

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

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

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

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

• منابع بیشتر مهاجرت Further Migration Resources

یادگیری Vue 2 | محتوای دوره قدیمی Learn Vue 2 | Old Course Content

• محتوای دوره Vue 2 Vue 2 Course Content

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

• زمان تمرین - خروجی داده ها به قالب ها Time to Practice - Outputting Data to Templates

استفاده از VueJS برای تعامل با DOM [VUE2] Using VueJS to Interact with the DOM [VUE2]

• زمان برای تمرین - رویدادها Time to Practice - Events

• زمان تمرین - خواص واکنشی Time to Practice - Reactive Properties

• زمان برای تمرین - یک ظاهر طراحی شده Time to Practice - Styling

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

• زمان تمرین - شرایط و فهرست ها Time to Practice - Conditionals & Lists

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

• زمان برای تمرین - اجزای سازنده Time to Practice - Components

برقراری ارتباط بین اجزا [VUE2] Communicating between Components [VUE2]

• زمان تمرین - ارتباط اجزا Time to Practice - Component Communication

مطالب بیشتر More Content

• امتیاز: محتوای بیشتر! Bonus: More Content!