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

درس ها Lessons

• تماشا کردن Watch

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

• Composable چیست؟ [ماژول 11] What is a Composable? [Module 11]

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

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

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

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

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

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

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

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

• Bulma & Design - نصب Bulma [ماژول 14] Bulma & Design - Install Bulma [Module 14]

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

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

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

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

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

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

• پروژه کلاس: Noteballs [ماژول 13] Class Project: Noteballs [Module 13]

• خلاصه دوره Course Roundup

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

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

• Options API vs Composition API [ماژول 3] Options API vs Composition API [Module 3]

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

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

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

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

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

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

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

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

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

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

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

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

• useRoute useRoute

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

• دستورالعمل - فوکوس خودکار [ماژول 17] Directive - Autofocus [Module 17]

• مقدمه [ماژول 1] Introduction [Module 1]

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

• پینیا - اقدامات Pinia - Actions

• لیست ها (v-for) [ماژول 9] Lists (v-for) [Module 9]

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

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

• خوش آمدی! Welcome!

• Vue 3 Docs و نصب Node.js [ماژول 2] Vue 3 Docs & Install Node.js [Module 2]

• Refs الگو Template Refs

• Vue Router - $route - Part 1 [ماژول 8] Vue Router - $route - Part 1 [Module 8]

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

• Pinia - راه اندازی و وضعیت [ماژول 16] Pinia - Setup & State [Module 16]

• Vue Devtools Vue Devtools

• مدیریت دولتی چیست؟ [ماژول 12] What is State Management? [Module 12]

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

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

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

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

• مراجع [ماژول 4] Refs [Module 4]

• آرایه یادداشت ها (مرجع) [ماژول 15] Notes Array (Ref) [Module 15]

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

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

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

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

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

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

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

• next Tick nextTick

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

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

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

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

• روش ها [ماژول 5] Methods [Module 5]

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

• اجزای کودک [ماژول 10] Child Components [Module 10]

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

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

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

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

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

• modelValue modelValue

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

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

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

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

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

• دستورالعمل های سفارشی محلی [ماژول 7] Local Custom Directives [Module 7]

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

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

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

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

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

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

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

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

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

• قلاب چرخه حیات - نصب شده [ماژول 6] Lifecycle Hooks - Mounted [Module 6]

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

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

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

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

• شکاف ها Slots

• پینیا - گتر Pinia - Getters

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

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

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

• اجزای دینامیک - قسمت 2 Dynamic Components - Part 2