دوره جامع توسعه‌دهنده VUE JS – آموزش Vue 2 و Vue 3 - آخرین آپدیت

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

مقدمه‌ای بر Vue.js و راه‌اندازی پروژه Introduction to Vue.js & Project Setup

• چرا در سال 2025 Vue.js یاد بگیریم؟ Why Learn Vue.js in 2025?

• مقایسه Vue 2 و Vue 3: تفاوت‌های کلیدی و مسیر مهاجرت Vue 2 vs Vue 3: Key Differences & Migration Path

• راه‌اندازی محیط و مقداردهی اولیه اولین پروژه Environment Setup & First Project Initialization

• بررسی ساختار پروژه و فایل‌های اصلی Exploring Project Structure & Core Files

مبانی اپلیکیشن‌های Vue Fundamentals of Vue Applications

• نمونه Vue: داده‌ها، متدها و واکنش‌گرایی Vue Instance: Data, Methods & Reactivity

• پیاده‌سازی اتصال دوطرفه (Two-way Binding) با v-model Implementing Two-Way Binding with v-model

• کار با دایرکتیوها: v-if, v-show, v-for, v-bind, v-on Working with Directives: v-if, v-show, v-for, v-bind, v-on

• تمرین عملی: ساخت اپلیکیشن ردیاب وظایف Practical Exercise: Building a Task Tracker Application

معماری کامپوننت در Vue.js Component Architecture in Vue.js

• مقدمه‌ای بر کامپوننت‌ها و ساخت اولین کامپوننت Introduction to Components & First Component Creation

• ثبت نام کامپوننت به صورت سراسری (Global) در مقابل محلی (Local) Global vs Local Component Registration

• جریان داده با Props و ارسال رویدادها (Emit) Data Flow with Props & Event Emission

• تمرین عملی: ساخت کامپوننت‌های پویا برای هدر و فوتر Practical Exercise: Building Dynamic Header & Footer Components

مدیریت چرخه حیات (Lifecycle) در Vue.js Vue.js Lifecycle Management

• درک Lifecycle Hooks و موارد استفاده از آن‌ها Understanding Lifecycle Hooks & Their Use Cases

• بررسی عمیق created, mounted, updated, destroyed Deep Dive into created, mounted, updated, destroyed

• تمرین عملی: ردیاب Todo با تایمر و شبیه‌سازی API Practical Exercise: Todo Tracker with Timers & API Simulation

ویژگی‌های Computed، متدها و Watcherها Computed Properties, Methods & Watchers

• متدها در مقابل Computed Properties: بهترین روش‌ها Methods vs Computed Properties: Best Practices

• ردیابی تغییرات داده‌ها با Watchers Tracking Data Changes with Watchers

• تمرین عملی: اپلیکیشن ردیاب بودجه Practical Exercise: Budget Tracker Application

ترکیب پیشرفته کامپوننت‌ها با استفاده از Slots Advanced Component Composition with Slots

• مقدمه‌ای بر Slots در Vue.js Introduction to Slots in Vue.js

• استفاده از Slotهای پیش‌فرض، نام‌گذاری شده و Scoped Using Default, Named & Scoped Slots

• تمرین عملی: ساخت کامپوننت کارت وبلاگ قابل استفاده مجدد Practical Exercise: Reusable Blog Card Component

مسیریابی و ناوبری با Vue Router (Vue 2) Routing & Navigation with Vue Router (Vue 2)

• نصب و پیکربندی Vue Router Installing & Configuring Vue Router

• پارامترهای پویا در مسیرها و مسیرهای تودرتو (Nested Routes) Dynamic Route Parameters & Nested Routes

• پیاده‌سازی Navigation Guards برای مسیریابی امن Implementing Navigation Guards for Secure Routing

کار با APIها با استفاده از Axios Working with APIs using Axios

• مقدمه‌ای بر Vuex + نصب و پیکربندی Introduction to Vuex + Installation and Configuration

• ساختار و کاربرد Vuex Store – State، Mutations، Actions و Getters (بخش اول) Vuex Store Structure And Usage – State, Mutations, Actions, and Getters(part1)

• ساختار و کاربرد Vuex Store – State، Mutations، Actions و Getters (بخش دوم) Vuex Store Structure And Usage – State, Mutations, Actions, and Getters(Part2)

• استفاده از Mixins برای دسترسی به Store بدون Import Mixins Usage-Acessing Store without Import

کار با APIها با استفاده از Axios (بخش دوم) Working with APIs using Axios

• نصب Axios و پیکربندی baseURL Installing Axios and configuring baseURL

• ارسال درخواست‌های GET و POST Making GET POST requests

• تمرین عملی: دریافت داده از یک API عمومی (مانند JSONPlaceholder) Hands-on Fetch data from any public API (e.g., JSONPlaceholder)

استقرار نهایی و تست عملی Vue 2 Final Deployment and Practice Test of Vue2

• جمع‌بندی کلی و ساخت پروژه طبق دستورالعمل‌های داده شده Bring everything together and create a project from given instructions

• دستورالعمل‌های نهایی استقرار (Deployment) Final deployment instructions

مقدمه‌ای بر Vue 3 و مبانی Composition API Introduction to Vue 3 & Composition API Fundamentals

• چرا Vue 3 یاد بگیریم؟ Why Learn Vue 3

• راه‌اندازی Vite و ساختار پوشه‌ها Vite Setup and Folder Structure

• مقدمه‌ای بر Composition API Introduction to the Composition API

تابع setup() و واکنش‌گرایی در Vue 3 The setup() Function and Reactivity in Vue 3

• مقایسه ref() در مقابل reactive() ref() vs reactive()

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

• تمرین عملی: ورودی فرم واکنش‌گرا و ثبت وضعیت (State Logging) Hands-On: Reactive Form Input and State Logging

ویژگی‌های Computed و Watcherها در Composition API Computed Properties and Watchers in the Composition API

• ویژگی‌های Computed در Composition API Computed Properties in the Composition API

• استفاده از watch، watchEffect و Watcherها در setup() Using watch, watchEffect, and Watchers in setup()

• تمرین عملی: ساخت یک اعتبارسنج فرم در لحظه (Real Time) Hands-On: Building a Real-Time Form Validator

کامپوننت‌ها و Composables در Composition API Components and Composables in the Composition API

• استفاده از Props و Emits در Composition API Using Props and Emits in the Composition API

• ساخت Composables قابل استفاده مجدد (useCounter) Creating Reusable Composables (useCounter)

• تمرین عملی: ساخت یک Composable سفارشی برای useFetch Hands-On: Building a Custom useFetch Composable

مسیریابی با Vue Router در Vue 3 Routing with Vue Router in Vue 3

• راه‌اندازی Vue Router با Vite Setting Up Vue Router with Vite

• مدیریت مسیرهای پویا (Dynamic Route) Dynamic Route Handling

• پیاده‌سازی Navigation Guards برای مسیرها Implementing Route Navigation Guards

مدیریت وضعیت (State Management) با Pinia State Management with Pinia

• راه‌اندازی Pinia در اپلیکیشن Vue 3 Setting Up Pinia in a Vue 3 Application

• تعریف و استفاده از Storeها در کامپوننت‌ها Defining and Using Stores in Components

• ماندگاری وضعیت (Persisting) در Pinia Store Persisting Pinia Store State

پروژه نهایی – ساخت یک اپلیکیشن Vue 3 آماده تولید Final Project – Building a Production-Ready Vue 3 Application

• یکپارچه‌سازی Vuetify در اپلیکیشن Vue 3 Integrating Vuetify into a Vue 3 App

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش اول Final Project: Weather & News Dashboard Part 1

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش دوم Final Project: Weather & News Dashboard Part 2

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش سوم Final Project: Weather & News Dashboard Part 3

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش چهارم Final Project: Weather & News Dashboard Part 4

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش پنجم Final Project: Weather & News Dashboard Part 5

• پروژه نهایی: داشبورد آب و هوا و اخبار - بخش ششم Final Project: Weather & News Dashboard Part 6

• استقرار نهایی اپلیکیشن Vue 3 Deploying the Vue 3 Application