آموزش Vue 3 in Action: 6 پروژه برای تسلط بر چارچوب

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

معرفی دوره Course Introduction

• Vue.js چیست و چرا باید آن را بیاموزید؟ What is Vue.js and Why You Should Learn It?

• The Essence of Vue.js - Vue.js چگونه در 3 دقیقه کار می کند The Essence of Vue.js - How Vue.js Works in 3 Minutes

• نمای کلی دوره: آنچه یاد خواهید گرفت و پروژه هایی که خواهید ساخت Course Overview: What You'll Learn and the Projects You'll Build

• چرا Vue 3 را انتخاب کنید: مزایا و مزایا Why Choose Vue 3: Benefits and Advantages

• به حداکثر رساندن یادگیری خود: چگونه از این دوره بهترین استفاده را ببرید Maximizing Your Learning: How to Make the Most Out of This Course

• دسترسی به کد منبع: کجا آن را پیدا کنیم Accessing the Source Code: Where to Find It

• راه اندازی VSCode: میانبرها، برنامه های افزودنی و نکات ضروری VSCode Setup: Essential Shortcuts, Extensions, and Tips

• به یک یادآوری در HTML، جاوا اسکریپت یا CSS نیاز دارید؟ در اینجا مقداری کمک وجود دارد Need a Reminder on HTML, JavaScript, or CSS? Here's Some Help

• به Discord بپیوندید! Join Discord!

اولین پروژه کوچک - آیا می توانید رانندگی کنید؟ 1st Mini Project - Can you Drive?

• مقدمه: پروژه 1 Intro: Project 1

• زنده کردن برنامه Vue! Making the Vue App Alive!

• واکنش پذیری در Vue - با استفاده از ref() Reactivity in Vue - Using ref()

• ویژگی های محاسبه شده - با استفاده از () Computed Properties - Using computed()

• کلاس های CSS شرطی Conditional CSS Classes

• اتصالات ورودی Input Bindings

• تمرین 1 - یک بازی امتحانی ساده بسازید Exercise 1 - Build a Simple Quiz Game

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

2nd Mini Project - گالری تصاویر با موارد دلخواه 2nd Mini Project - Image Gallery with Favorites

• معرفی: دومین پروژه کوچک Intro: 2nd Mini Project

• مدیریت رویداد (v-on) Event Handling (v-on)

• اصلاح کننده های مدیریت رویداد Event Handling Modifiers

• رندر شرطی (v-if) Conditional Rendering (v-if)

• فهرست‌های رندر (v-for) Rendering Lists (v-for)

• صفت Binding Attribute Binding

• تمرین 2 - تغییر حالت دلخواه/حذف تصویر Exercise 2 - Favorite Toggling/Image Removing

• تمرین 2 - راه حل برای کار 1 Exercise 2 - Solution to Task 1

• تمرین 2 - راه حل برای کار 2 Exercise 2 - Solution to Task 2

سومین پروژه کوچک - مدیر وظیفه 3rd Mini Project - Task Manager

• معرفی: سومین پروژه کوچک Intro: 3rd Mini Project

• قلاب چرخه حیات Lifecycle Hooks

• Refs الگو (دسترسی به عناصر DOM) Template Refs (Accessing DOM Elements)

• نمایش لیست وظایف Displaying Task List

• اضافه کردن وظایف جدید Adding New Tasks

• ناظران و عوارض جانبی Watchers and Side Effects

• مقایسه ساعت با ساعت افکت Comparing watch with watchEffect

• استفاده از حافظه محلی Using Local Storage

• تمرین 3 - حذف دکمه و وظایف فیلتر Exercise 3 - Remove Button & Filtering Tasks

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

پروژه متوسط ​​چهارم - ثبت رویداد (اجزا) 4th Medium Project - Event Registration (Components)

• مقدمه: چهارمین پروژه متوسط Intro: 4th Medium Project

• ایجاد پروژه Vue با استفاده از Vite Creating Vue Project using Vite

• آشنایی با ساختار پروژه و فایل ها Understanding the Project Structure and Files

• نصب و استفاده از TailwindCSS Installing and Using TailwindCSS

• ایجاد و استفاده از کامپوننت ها Creating and Using Components

• ارائه فهرستی از کامپوننت ها Rendering a List of Components

• پاس پاس Passing Props

• رویدادهای مؤلفه Component Events

• سقوط از طریق صفات Fall through Attributes

• شکاف های اجزای اصلی Basic Component Slots

• تمرین 4 - یک جزء کارت قابل استفاده مجدد ایجاد کنید Exercise 4 - Create a Reusable Card Component

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

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

• شکاف های با نام مشروط Conditional Named Slots

• انواع کامپوننت Component Variants

پروژه متوسط ​​چهارم - ثبت رویداد (واکشی داده ها) 4th Medium Project - Event Registration (Data Fetching)

• مقدمه: چهارمین پروژه متوسط ​​- ایست بازرسی شماره 1 Intro: 4th Medium Project - Checkpoint #1

• راه اندازی Mock API Server Setting Up the Mock API Server

• واکشی داده ها Fetching Data

• حالت بارگیری Loading State

• جلوگیری از تغییر چیدمان (جایگزین‌ها) Preventing Layout Shifts (Placeholders)

• ارسال اطلاعات به سرور Posting Data to the Server

• تمرین 5 - بارگیری رزروها Exercise 5 - Loading Bookings

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

پروژه متوسط ​​چهارم (واسط کاربری خوش‌بینانه، مدیریت خطا) 4th Medium Project (Optimistic UI, Error Handling)

• مقدمه: چهارمین پروژه متوسط ​​- ایست بازرسی شماره 2 Intro: 4th Medium Project - Checkpoint #2

• رابط کاربری خوش‌بینانه با مثال رزرو رویداد توضیح داده شده است Optimistic UI Explained with Event Booking Example

• پیاده‌سازی رابط کاربری خوش‌بینانه رزرو رویداد Implementing Event Booking Optimistic UI

• لغو رزرو با رابط کاربری خوش‌بینانه Cancelling Bookings with Optimistic UI

• استخراج EventList: چرا؟ Extracting EventList: Why?

• استخراج EventList: Let's Go! Extracting EventList: Let's Go!

• استخراج لیست رویدادها: مدیریت وضعیت های خالی Extracting EventList: Handling Empty States

• استخراج EventList: مدیریت خطا و بازیابی خطا Extracting EventList: Error Handling and Error Recovery

• طراحی واکنشگرا Responsive Design

• مؤلفه ها و نمادهای پویا Dynamic Components & Icons

پروژه متوسط ​​چهارم (قابلیت ترکیب و وضعیت اشتراک) 4th Medium Project (Composables & Sharing State)

• مقدمه: Composables و State Sharing Intro: Composables and State Sharing

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

• استفاده از رویدادهای قابل ترکیب و حذف Using Composable and Eliminating Events

• جزء BookingList The BookingList Component

• مولفه و تمرین 6 رسیدگی به خطا Error Handling Component & Exercise 6

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

پروژه متوسط ​​پنجم (TypeScript، Transitions، Tabs) 5th Medium Project (TypeScript, Transitions, Tabs)

• مقدمه: معرفی پروژه متوسط ​​پنجم Intro: 5th Medium Project Introduction

• یک پروژه Vue TypeScript ایجاد کنید و Tailwind را اضافه کنید Create a Vue TypeScript Project & Add Tailwind

• Props و Events را با TypeScript تعریف کنید Define Props and Events with TypeScript Types

• محدود کردن انواع refs و سایر داده ها Narrowing Down the Types of refs and Other Data

• تب های رندر - چگونه حالت فعال برگه را نمایش دهیم؟ Rendering Tabs - How to Display the Tab Active State?

• رندر کردن محتوای برگه با استفاده از اجزای پویا Rendering Tab Content using Dynamic Components

• Transitions - نحوه اضافه کردن CSS Transitions به محتوای Tab Transitions - How to Add CSS Transitions on Tab Content

• مولفه های انتقال سفارشی - چگونه از انتقال ها استفاده مجدد کنیم؟ Custom Transition Components - How to Reuse Transitions?

پنجمین پروژه متوسط ​​(TypeScript، Teleport، KeepAlive، وضعیت مشترک) 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)

• مقدمه: پنجمین ایستگاه بازرسی پروژه متوسط ​​شماره 2 Intro: 5th Medium Project Checkpoint #2

• فرم عمومی نشانه گذاری و انتقال گوچا General Form Markup & Transition Gotcha

• تابع واکنشی با ref در Vue 3 چه تفاوتی دارد؟ How is the reactive Function Different from ref in Vue 3?

• کامپوننت KeepAlive - چگونه وضعیت اجزای پویا را از دست ندهیم؟ KeepAlive Component - How to Not Lose the State of Dynamic Components?

• ایجاد فرم‌های حریم خصوصی و اعلان‌ها: افزودن نشانه‌گذاری و حفظ داده‌های کاربر Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data

• همگام سازی فضای ذخیره سازی محلی: نحوه ذخیره و بازیابی تنظیمات Syncing Local Storage: How to Store and Retrieve Settings

• ایمنی TypeScript: Generics و Keyof - ایمنی نوع ذهنی! TypeScript Safety: Generics and Keyof - Mindblowing Type Safety!

• ساخت یک سیستم اعلان با استفاده از Toast Component Building a Notification System using Toast Component

• ایجاد useNotifications Composable Creating a useNotifications Composable

• مؤلفه Teleport - نحوه انتقال نشانه گذاری به عنصر دیگر (به عنوان مثال بدنه) Teleport Component - How to Move Markup to Another Element (e.g. body)

ششمین پروژه متوسط ​​(روتر Vue) 6th Medium Project (Vue Router)

• معرفی: پروژه ششم Intro: 6th Project

• ایجاد پروژه کتاب دستور غذا Creating the Recipe Book Project

• آشنایی با روتر Vue و پیکربندی آن Understanding Vue Router and it's Config

• نماهای مسیر چگونه رندر می شوند و چگونه لینک ها را اضافه کنیم؟ How Route Views are Rendered and How to Add Links?

• اضافه کردن Routes، RouterLink در مقابل یک عنصر و استفاده از Route Name Adding Routes, RouterLink vs A Element and Using Route Name

• مسیرهای پویا - چگونه آنها را تعریف کرده و پارامترها را در کامپوننت بخوانید؟ Dynamic Routes - How to Define Them and Read Parameters in the Component?

• پیوند دادن به مسیرهای پویا با Params Linking to Dynamic Routes with Params

• مسیر بازگشتی، صفحه 404 - آسان نیست! Fallback Route, 404 Page - It's not Easy!

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

• واکشی داده ها در داخل قلاب نصب شده هشدار و راه حل! Data Fetching Inside the onMounted Hook Caveat and Solution!

• تغییر مسیرها و نام مستعار Redirects and Aliases

ششمین پروژه متوسط ​​(مدیریت ایالتی پینیا) 6th Medium Project (Pinia State Management)

• درک Pinia: چیست، چگونه کار می کند و چرا به آن نیاز دارید Understanding Pinia: What It Is, How It Works, and Why You Need It

• تعریف و ایجاد فروشگاه Defining and Creating Store

• افزودن اقدامات به فروشگاه Pinia شما Adding Actions to Your Pinia Store

• کار با Getters در Pinia Working with Getters in Pinia

• فهرست و دستور العمل های فیلتر: منطق متعادل در فروشگاه Listing and Filtering Recipes: Balancing Logic in the Store

• پلاگین های پینیا Pinia Plugins

• پلاگین Pinia: همگام سازی با محل ذخیره سازی Pinia Plugin: Syncing with Local Storage

• Pinia و TypeScript: تایپ کردن ویژگی های سفارشی Pinia and TypeScript: Typing Custom Properties

• تمرین 7 - ویرایش فرم Exercise 7 - Edit Form

• راه حل تمرین 7 - ویرایش فرم Exercise 7 Solution - Edit Form

• موارد مورد علاقه: Pinia Action، Getter و Changes Component Favorites: Pinia Action, Getter and Component Changes

• موارد دلخواه: ترکیب ایالت پینیا و لیست موارد دلخواه Favorites: Mixing Pinia State and List of Favorites

• افزودن Tailwind CSS و استایل کردن برنامه شما Adding Tailwind CSS and Styling Your App

پاداش Bonus

• پاداش Bonus