آموزش Vue JS 3: Composition API (با Pinia، Firebase 9 و Vite)

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

معرفی Introduction

• معرفی Introduction

• Composition API چیست؟ What is the Composition API?

• ویرایشگر و راه اندازی نرم افزار Editor & Software Setup

• Vue Devtools Vue Devtools

شروع شدن Getting Started

• Vue 3 Docs و نصب Node.js Vue 3 Docs & Install Node.js

• یک پروژه Vue ایجاد کنید Create a Vue Project

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

• کد منبع تمام شده Finished Source Code

Options API vs Composition API - Switching Over Options API vs Composition API - Switching Over

• Options API - طراحی Options API - Design

• Options API - Data & Methods Options API - Data & Methods

• آن را به Composition API تبدیل کنید Convert it to Composition API

• Composition API - Data (Refs) & Methods Composition API - Data (refs) & Methods

• راه اندازی اسکریپت - یک راه ساده تر! Script Setup - An Easier Way!

• کد منبع تمام شده Finished Source Code

Refs، Objects Reactive & Non-Reactive Data Refs, Reactive Objects & Non-Reactive Data

• مراجع Refs

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

• اشیاء واکنشی Reactive Objects

• داده های غیر واکنشی Non-Reactive Data

• کد منبع تمام شده Finished Source Code

روش‌ها، محاسبه و تماشا Methods, Computed & Watch

• مواد و روش ها Methods

• ویژگی های محاسبه شده Computed Properties

• نکته ای در مورد فیلترها A Note on Filters

• تماشا کردن Watch

• کد منبع تمام شده Finished Source Code

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

• قلاب های نصب شده Mounted Hooks

• قلاب های فعال شده Activated Hooks

• قلاب های به روز شده Updated Hooks

• چند قلاب! Multiple Hooks!

• کد منبع تمام شده Finished Source Code

بخشنامه ها Directives

• دستورالعمل های سفارشی محلی Local Custom Directives

• دستورالعمل های سفارشی جهانی Global Custom Directives

• کد منبع تمام شده Finished Source Code

روتر Vue Vue Router

• $route - قسمت 1 $route - Part 1

• $route - قسمت 2 $route - Part 2

• useRoute useRoute

• استفاده از روتر useRouter

• کد منبع تمام شده Finished Source Code

لیست ها، Teleport، Refs الگو و nextTick Lists, Teleport, Template Refs & nextTick

• لیست ها (v-for) Lists (v-for)

• Refs الگو Template Refs

• next Tick nextTick

• تله پورت - قسمت 1 Teleport - Part 1

• تله پورت - قسمت 2 Teleport - Part 2

• کد منبع تمام شده Finished Source Code

اجزای کودک، لوازم جانبی و انتشارات Child Components, Props & Emits

• اجزای کودک Child Components

• رفع نماهای بارگذاری تنبل Fix Lazy-Loading Views

• شکاف ها Slots

• لوازم جانبی Props

• منتشر می کند Emits

• modelValue modelValue

• به روز رسانی: modelValue update:modelValue

• اجزای پویا - قسمت 1 Dynamic Components - Part 1

• اجزای پویا - قسمت 2 Dynamic Components - Part 2

• ارائه/تزریق - قسمت 1 Provide / Inject - Part 1

• ارائه/تزریق - قسمت 2 Provide / Inject - Part 2

• کد منبع تمام شده Finished Source Code

ترکیب پذیر Composables

• Composable چیست؟ What is a Composable?

• یک Composable ایجاد کنید Create a Composable

• از ما Composable استفاده کنید Use Our Composable

• از Composable ما دوباره استفاده کنید Reuse our Composable

• Composable را از VueUse اضافه کنید Add Composable from VueUse

• کد منبع تمام شده Finished Source Code

مدیریت دولتی با پینیا State Management with Pinia

• مدیریت دولتی چیست؟ What is State Management?

• Composable State vs Vuex vs Pinia Composable State vs Vuex vs Pinia

• ایالت - قسمت 1 State - Part 1

• ایالت - قسمت 2 State - Part 2

• اقدامات Actions

• گیرندگان Getters

• از فروشگاه ما در هر کجا استفاده کنید Use our Store Anywhere

• کد منبع تمام شده Finished Source Code

Noteballs: راه اندازی و روتر Noteballs: Setup & Router

• برنامه معرفی و Noteballs Introduction & Noteballs App

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

• روتر - نصب و راه اندازی Router - Install & Setup

• روتر - چند مسیر اضافه کنید Router - Add Some Routes

• RouterView و Navigation را اضافه کنید Add RouterView & Navigation

• روتر - مرتب کردن Router - Tidying Up

• کد منبع تمام شده Finished Source Code

Noteballs: Bulma & Design Noteballs: Bulma & Design

• Bulma را نصب کنید Install Bulma

• نوار نوار - طراحی Nav Bar - Design

• نوار ناوبری - پیمایش و نشان‌واره Nav Bar - Navigation & Logo

• نوار ناوبری - طراحی و منوی پاسخگو Nav Bar - Responsive Design & Menu

• صفحات (طراحی) Pages (Design)

• یادداشت ها (طراحی) Notes (Design)

• افزودن فرم یادداشت (طراحی) Add Note Form (Design)

• کد منبع تمام شده Finished Source Code

یادداشت‌ها: داده‌ها، روش‌ها، اجزای کودک، محاسبه‌شده و انتشار Noteballs: Data, Methods, Child Components, Computed & Emit

• آرایه یادداشت ها (مرجع) Notes Array (Ref)

• روش اضافه کردن یادداشت Add Note Method

• جزء فرزند - توجه Child Component - Note

• لوازم جانبی (یادداشت) Props (Note)

• محاسبه شده (طول یادداشت) Computed (Note Length)

• حذف یادداشت (انتشار) Delete Note (Emit)

• کد منبع تمام شده Finished Source Code

Noteballs: Pinia، اجزای قابل استفاده مجدد، روتر و موارد دیگر Noteballs: Pinia, Reusable Components, Router & More

• Pinia - راه اندازی و وضعیت Pinia - Setup & State

• از فروشگاه ما استفاده کنید Use Our Store

• اقدام - اضافه کردن یادداشت Action - Add Note

• اقدام (با پارامترها) - اضافه کردن یادداشت Action (with Parameters) - Add Note

• اقدام - حذف یادداشت Action - Delete Note

• صفحه و مسیر یادداشت را ویرایش کنید Edit Note Page & Route

• کامپوننت قابل استفاده مجدد - AddEditNote Reusable Component - AddEditNote

• با modelValue وصل شوید Hook up with modelValue

• فوکوس را برطرف کنید Fix the Focus

• لوازم رنگ سفارشی، جای جای و برچسب Custom Color, Placeholder & Label Props

• Getter - دریافت محتوای یادداشت (useRoute) Getter - Get Note Content (useRoute)

• دریافت کننده (با پارامترها) - محتوای یادداشت را دریافت کنید Getter (with Parameters) - Get Note Content

• اقدام - به روز رسانی یادداشت Action - Update Note

• userRouter - تغییر مسیر به صفحه یادداشت ها useRouter - Redirect to Notes Page

• صفحه دریافت کنندگان و آمار بیشتر More Getters & Stats Page

• کد منبع تمام شده Finished Source Code

Noteballs: Directives، Watchers & Composables Noteballs: Directives, Watchers & Composables

• دستورالعمل - فوکوس خودکار Directive - Autofocus

• دستورالعمل جهانی - فوکوس خودکار Global Directive - Autofocus

• تماشای تعداد کاراکترها (ساعت) Watch the Number of Characters (Watch)

• Composable - استفاده ازWatchCharacters Composable - useWatchCharacters

• Composable - پارامترهای چندگانه Composable - Multiple Parameters

• روی Outside Composable (VueUse، Refs الگو) کلیک کنید Click Outside Composable (VueUse, Template Refs)

• کد منبع تمام شده Finished Source Code

Noteballs: حذف Modal Noteballs: Delete Modal

• حذف طرح مودال (اشیاء واکنشی) Delete Modal Design (Reactive Objects)

• مخفی کردن Delete Modal (modelValue & update:modelValue) Hide the Delete Modal (modelValue & update:modelValue)

• Delete Modal - برای بستن Outside را کلیک کنید Delete Modal - Click Outside to Close

• حذف مدال - کنترل صفحه کلید (قلاب های چرخه زندگی) Delete Modal - Keyboard Control (Lifecycle Hooks)

• Delete Modal - Delete The Note Delete Modal - Delete The Note

• کد منبع تمام شده Finished Source Code

• کد منبع تمام شده Finished Source Code

Firebase 9: Introduction & Setup Firebase 9: Introduction & Setup

• مقدمه ای بر Firebase Introduction to Firebase

• یک پروژه Firebase ایجاد کنید Create a Firebase Project

• ایجاد برنامه و نصب Firebase Create App & Install Firebase

• راه اندازی پایگاه داده Firestore Setup Firestore Database

• به پایگاه داده متصل شوید Connect to Database

Firebase 9: خواندن، افزودن، حذف، به‌روزرسانی و سفارش Firebase 9: Read, Add, Delete, Update & Order

• نمایش یادداشت ها از Firestore Display Notes from Firestore

• یادداشت ها را در زمان واقعی دریافت کنید Get Notes in Real Time

• اضافه کردن یادداشت Add Note

• حذف یادداشت Delete Note

• به روز رسانی یادداشت Update Note

• یادداشت های سفارش بر اساس تاریخ (ID) Order Notes by Date (ID)

• بهبود ساختار سند و شناسه خودکار Improve Document Structure & Auto ID’s

• نمایش تاریخ در یادداشت Display Date on Note

• یک نوار پیشرفت اضافه کنید Add a Progress Bar

• زمانی که هیچ یادداشتی وجود ندارد، جای‌بانی نمایش داده شود Show Placeholder when No Notes

Firebase 9: احراز هویت Firebase 9: Authentication

• صفحه ورود و ثبت نام - برگه ها Login & Register Page - Tabs

• صفحه ورود و ثبت نام - فرم Login & Register Page - Form

• Firestore Authentication & Auth Store Firestore Authentication & Auth Store

• ثبت نام کاربر Register User

• خروج کاربر Logout User

• ورود کاربر Login User

• به تغییرات Auth گوش دهید و داده‌های کاربر را ذخیره کنید Listen for Auth Changes & Store User Data

• دکمه خروج را بهبود بخشید Improve Logout Button

• تغییر مسیر کاربر در Auth Change Redirect User on Auth Change

Firebase 9: چند کاربر Firebase 9: Multiple Users

• بازسازی پایگاه داده برای چندین کاربر Restructure Database for Multiple Users

• Refs را برای چند کاربر تنظیم کنید Setup Refs for Multiple Users

• پاک کردن آرایه یادداشت ها در وضعیت زمانی که کاربر از سیستم خارج می شود Clear Notes array in State when user logs out

• لغو اشتراک از شنونده دریافت یادداشت ها Unsubscribe from the Get Notes Listener

Firebase 9: امنیت و میزبانی Firebase 9: Security & Hosting

• گاردهای ناوبری - قسمت 1 Navigation Guards - Part 1

• گاردهای ناوبری - قسمت 2 Navigation Guards - Part 2

• قوانین امنیتی Firestore - قسمت 1 Firestore Security Rules - Part 1

• قوانین امنیتی Firebase - قسمت 2 Firebase Security Rules - Part 2

• میزبانی - قسمت 1 Hosting - Part 1

• میزبانی - قسمت 2 Hosting - Part 2

سخنرانی های جایزه Bonus Lectures

• سخنرانی پاداش Bonus Lecture