آموزش Vue JS - راهنمای جامع [2025] - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• ویو چیست؟ What is Vue?

• چه مباحثی را پوشش خواهیم داد؟ What we will cover?

• پروژه نهایی - دمو Final project - Demo

• کتاب الکترونیکی ویو Vue E-Book

• دسترسی به کتاب الکترونیکی Access E - Book

• نصب Node JS Install Node JS

• افزونه VS Code VS Code Extension

• مواد آموزشی دوره Course Material

مبانی ویو Vue Fundamentals

• ایجاد پروژه Create Project

• سلام ویو Hello Vue

• برگرداندن چندین ویژگی Returning multiple properties

• اشیاء و آرایه‌ها Object and Arrays

• جاوا اسکریپت و ویو Javascript and Vue

• توابع در ویو Functions in Vue

• تکلیف 1 - تابع Assignment 1 - Function

• راه حل تکلیف 1 - تابع Assignment 1 Solution - Function

واکنش‌پذیری در ویو Reactivity in Vue

• Ref Ref

• Timeout در تابع Timeout in Function

• Ref روی شیء Ref on Object

• Reactive در ویو Reactive in Vue

• Reactive و non reactivity در ویو Reactive and non reactivity in vue

دستورالعمل‌ها در ویو Directives in Vue

• V-html V-html

• دستورالعمل V-once V-once directive

• دستورالعمل V-bind V-bind directive

• پاکسازی Cleanup

• دستورالعمل V-show V-show directive

• دستورالعمل V-if V-if directive

• دستورالعمل‌های V-else و v-else-if V-else and v-else-if directive

• دستورالعمل V-for V-for directive

• تکرار روی آرایه‌ای از اشیاء Iterate over array of objects

• مقدار کلید در یک شیء Key value in an object

• V-once در حلقه V-once in loop

• کلید در v-for Key in v-for

• پاکسازی پروژه Clean the project

استایل‌ها در ویو Styles in Vue

• اتصال استایل‌ها در ویو Binding styles in vue

• اتصالات استایل پویا Dynamic style bindings

• اتصال کلاس‌ها در ویو Class bindings in vue

• اتصال کلاس‌ها قسمت 2 Class bindings part 2

• آرایه‌ای از کلاس‌ها و اشیاء استایل سفارشی Array of classes and custom style objects

• نماد اختصاری V-bind V-bind short notation

• پاکسازی Cleanup

رویدادها در ویو Events in Vue

• رویداد کلیک روی دکمه Button on click event

• انتقال پارامترها به توابع Passing parameters to functions

• شیء رویداد Event object

• اصلاح‌کننده‌های رویداد Event modifiers

• اصلاح‌کننده‌های کلید Key modifiers

• پاکسازی Cleanup

اتصال داده Data binding

• اتصال داده دو طرفه Two way data binding

• اصلاح‌کننده‌های Model Model modifiers

• ویژگی‌های Computed Computed Properties

• مقدار قبلی ویژگی computed Previous value of computed property

• Watchers در ویو Watchers in vue

• Watchers در ویژگی reactive Watchers in reactive property

• MovieOPedia - تنظیمات پایه MovieOPedia - Base Setup

• تکلیف - MovieOPedia - رویدادهای دکمه Assignment - MovieOPedia - Button events

• راه حل تکلیف - MovieOPedia - رویدادهای دکمه Assignment Solution - MovieOPedia - Button events

• تکلیف - MovieOPedia - Watcher و Computed Prop Assignment - MovieOPedia - Watcher and Computed Prop

• راه حل تکلیف - MovieOPedia - Watcher و Computed Prop Assignment Solution - MovieOPedia - Watcher and Computed Prop

• Watchers می‌تواند ناهمزمان باشد Watchers can be async

• میانبر برای v-on Shorcut for v-on

فرم‌ها Forms

• تنظیمات فرم‌ها Forms Setup

• جلوگیری از submit در فرم‌ها Prevent submit in forms

• اصلاح‌کننده‌های Model Model modifiers

• دکمه‌های Radio Radio Buttons

• Dropdown در ویو Dropdown in Vue

• اعتبارسنجی در blur Validate on blur

• اعتبارسنجی فرم‌ها Forms validation

ایجاد پروژه Create Project

• ایجاد پروژه ویو با استفاده از vite Create vue project using vite

• Dev Tools در ویو Dev Tools in Vue

• حذف تمام فایل‌های ویو از پروژه Remove all vue files from project

• سلام دنیا از ویو Hello World from vue

• ویو در عمل Vue in action

کامپوننت‌ها Components

• ایجاد اولین کامپوننت Create first component

• ایجاد یک کامپوننت دیگر Create another component

• تنظیمات تمیزتر Cleaner setup

• کامپوننت‌های محلی در مقابل سراسری Local vs global components

• تکلیف - کامپوننت محلی Assignment - local component

• راه حل تکلیف - کامپوننت محلی Assignment Solution - local component

• اضافه کردن Bootstrap Add Bootstrap

ارتباط کامپوننت Component communication

• انتقال props Passing props

• Props متصل Binded props

• اعتبارسنجی props Validating props

• Props و متغیر محلی Props and local variable

• لیست مخاطبین List of contacts

• انتقال اتصال prop پویا Passing dynamic prop binding

• تغییر پویا کلاس و متن دکمه Dynamically change class and button text

• نکته اضافی (TIP) Additional Pointer (TIP)

• Emits در عمل Emits in Action

• انتقال پارامتر در emits Passing parameter in emits

• انتقال آرایه در emit Pass array in emit

• نکته اضافی (TIP) - دریافت مقدار از کامپوننت والد Additional Pointer (TIP) - Get value from parent component

• انتقال اشیاء در Emit Passing objects in Emit

• Emit درون خطی Inline emit

Provide و Inject Provide and Inject

• اضافه کردن کامپوننت New Contact Add New Contact component

• تکلیف - Emit در ویو Assignment - Emit in Vue

• راه حل تکلیف - Emits در ویو Assignment Solution - Emits in Vue

• ژنراتور عدد شانس Lucky Number Generator

• انتقال props به کامپوننت نوه Passing props down to grandchild component

• مشکل با Props Issue with Props

• Provide و Inject Provide and Inject

• انتقال متد به عنوان props Passing method as props

Slots و چرخه حیات Slots and Lifecycle

• پاکسازی و Lucky Number V2 Cleanup and Lucky Number V2

• کامپوننت‌های پویا Dynamic Components

• نکته اضافی (TIP) Additional Pointer (TIP)

• Keep Alive Keep Alive

• پاکسازی Cleanup

• Slots Slots

• چه کسی مالک داده‌های slots است؟ Who owns the slots data

• Named Slots Named Slots

• Scoped Styles Scoped Styles

• پاکسازی چرخه حیات Lifecycle cleanup

• دموی چرخه حیات Lifecycle Demo

• پاکسازی پروژه Clean Up the project

• Composibles در عمل Composibles in Action

• Composible در کامپوننت‌های متعدد Composible in multiple components

• Props در Composibles Props in Composibles

مسیر‌یابی Routing

• ایجاد پروژه Create Project

• اضافه کردن Vue Router Add Vue Router

• ایجاد کامپوننت‌ها Create Components

• ایجاد Router در ویو Create Router in Vue

• مسیر‌یابی در عمل Routing in action

• پیکربندی Vite Vite Configuration

• اضافه کردن هدر Add header

• Router Link Router Link

• اتصال مسیر پویا Dynamic Route Binding

• پارامترهای متعدد در url Multiple parameters in url

• مسیر با مقادیر پویا Route with dynamic values

• مسیرهای نام‌گذاری شده Named routes

• استفاده از مسیرهای نام‌گذاری شده Using named routes

• تغییر مسیر Url Redirect Url

• یافت نشد Not Found

• پیمایش از اسکریپت به کامپوننت دیگر Navigate from script to another component

• دکمه بازگشت Back button

• نگهبان ناوبری سراسری Global navigation guard

• محافظت از صفحات در برابر دسترسی غیرمجاز Protect pages from unauthenticated access

• کامپوننت عدم دسترسی در عمل No access component in action

• لینک کلاس فعال Active class link

درخواست‌های API API Requests

• ایجاد پروژه و پاکسازی Create Project and cleanup

• Axios در عمل Axios in action

• Fetch در عمل Fetch in Action

• اجرای json server json server up and running

• درخواست Get روی json server Get request on json server

• کد سازمان‌یافته Organized Code

• Loader در عمل Loader in action

• کامپوننت Loader Loader Component

Pinia Pinia

• ایجاد پروژه Create Project

• مسیر‌یابی در عمل Routing in action

• اضافه کردن Pinia به App Add Pinia to App

• ایجاد فروشگاه Pinia Create Pinia store

• UI برای صفحه اصلی UI for Home Page

• استفاده از فروشگاه در یک کامپوننت Use store in a component

• به‌روزرسانی State در Pinia Updating State in Pinia

• Getters در Pinia و یک مشکل Getters in Pinia and a problem

• Actions در Pinia Actions in Pinia

• بازنشانی بازی Reset Game

• Pinia در سراسر کامپوننت‌ها Pinia across components

• Composition API Style Composition API Style

تنظیمات پروژه نهایی Final Project Setup

• ایجاد پروژه و بسته‌ها Create Project and Packages

• اضافه کردن پوشه و کامپوننت‌های خالی Add Folder and Empty Components

• پیکربندی Routes و Constants Configure Routes and Constants

• طرح‌بندی Header Header Layout

• کامپوننت Footer Footer Component

• Header UI قسمت 1 Header UI Part 1

• Header در عمل Header in Action

Theme Store Theme Store

• اضافه کردن تنظیمات رنگ در navbar Add color setting in navbar

• Theme Store Theme Store

• Themes در عمل Themes in Action

محصول و Firebase Product and Firebase

• ایجاد App در firebase Create App in firebase

• ایجاد پایگاه داده Firestore Create Firestore Database

• Product Service Product Service

• ایجاد UI محصول Create Product UI

• فرم محصول Product Form

• پردازش شیء محصول Process Product Object

• اعتبارسنجی فرم Form Validation

• Dropdown دسته‌بندی Category Dropdown

• نکته اضافی (TIP) Additional Pointer (TIP)

• Sweet alert Sweet alert

• اشکال در Tags Bug with Tags

• ایجاد محصول در Firebase و Redirect Create Product in Firebase and Redirect

مدیریت محصول Product Management

• قالب لیست محصول Product List Template

• واکشی تمام محصولات Fetch all Products

• نمایش تمام محصولات Display all Products

• Loader بوت استرپ Bootstrap loader

• Endpoints در Product Service Endpoints in Product Service

• حذف محصول در عمل Delete Product in Action

• بارگیری محصول در به‌روزرسانی Load Product on Update

• به‌روزرسانی در عمل Update in Action

صفحه اصلی Home Page

• دریافت لیست محصول برای صفحه اصلی Get Product List for Home Page

• قالب‌ها برای صفحه اصلی و Product Card Templates for Home Page and Product Card

• کامپوننت کارت محصول پویا Dynamic Product Card Component

• تنظیمات نمایش فروش Sale Display Settings

• Modal برای جزئیات محصول Modal for Product Details

• جزئیات محصول در عمل Product Detail in Action

• نمایش لیست دسته‌بندی Show Category List

• فیلتر دسته‌بندی در عمل Filter Category in Action

• جستجوی محصول Search Product

• گزینه‌های مرتب‌سازی Sort Options

• مرتب‌سازی در عمل Sort in Action

احراز هویت Authentication

• اضافه کردن قالب‌ها Add Templates

• اضافه کردن Auth در Firebase Add Auth in Firebase

• تنظیمات پایه Sign Up Sign Up base setup

• تنظیمات پایه Sign In Sign In base setup

• ایجاد Auth Store Create Auth Store

• ایجاد کاربر در Firebase Create User in Firebase

• پیام خطای اعتبارسنجی Validation Error Message

• اضافه کردن مجموعه User در Firebase با Roles Add User Collection in Firebase with Roles

• Sign-in در عمل Sign-in in action

• به‌روزرسانی Header در Sign-In Update Header on Sign-In

• بررسی session در firebase Check session in firebase

• Sign-Out در عمل Sign-Out in Action

• بررسی Auth State قبل از mounting app Check Auth State before mounting app

• کامپوننت Contact US Contact US Component

مجوز Authorization

• Admin و Regular User Admin and Regular User

• اضافه کردن متدهای Authorization Add Authorization methods

• Roles Authorization در عمل Roles Authorization in Action

• نمایش ایمیل Show Email

• پاکسازی Clean Up

Cloudinary و Deployment Cloudinary and Deployment

• یک اشکال A bug

• تراز کردن theme store با Composition API Align theme store with Composition API

• پایداری Pinia State Presist Pinia State

• روش آپلود در cloudinary Upload to cloudinary method

• آپلود Cloudinary Cloudinary upload

• رفع اشکال Bug Fixed

• Swal Composibles Swal Composibles

• استقرار برنامه Deploy Application