آموزش Vue 3 Fundamentals

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

شروع کار با Vue Getting Started with Vue

• مقدمه و آنچه ما خواهیم ساخت Introduction and What We'll Build

• مروری بر مفهومی Vue A Conceptual Overview of Vue

• راه اندازی محیط ما Setting Up Our Environment

• کاوش در گزینه های Vue Tooling Exploring Vue Tooling Options

• ایجاد یک پروژه جدید با Vue CLI Creating a New Project with the Vue CLI

• بررسی آنچه Vue CLI ایجاد کرد Exploring What the Vue CLI Created

• ایجاد یک پروژه جدید با create-vue Creating a New Project with create-vue

• شبیه سازی برنامه آزمایشی ما Cloning Our Demo Application

• اصلاح صفحه اصلی پیش فرض Modifying the Default Home Page

ایجاد کامپوننت های سفارشی Vue Creating Custom Vue Components

• معرفی Introduction

• درک اجزای Vue Understanding Vue Components

• مولفه های محلی در مقابل جهانی Local Versus Global Components

• ایجاد اولین مؤلفه Vue ما Creating Our First Vue Component

• خلاصه Summary

با استفاده از Vue Template Syntax Using Vue Template Syntax

• معرفی Introduction

• اتصال ویژگی ها به داده ها با v-bind Binding Attributes to Data with v-bind

• اتصال به رویدادها با v-on Binding to Events with v-on

• استفاده از صحافی های کوتاه Using Shorthand Bindings

• نمایش داده ها با درون یابی Displaying Data with Interpolation

• نمایش مشروط محتوا با v-if و v-show Conditionally Displaying Content with v-if and v-show

• تکرار عناصر با v-for Repeating Elements with v-for

• قالب بندی داده ها Formatting Data

• استفاده از قلاب چرخه حیات کامپوننت Using Component Lifecycle Hooks

• به اشتراک گذاری عملکرد کامپوننت با Mixins Sharing Component Functionality with Mixins

• خلاصه Summary

استفاده از Vue's Composition and Reactivity API Using Vue's Composition and Reactivity APIs

• معرفی Introduction

• چرا از Composition API استفاده کنیم؟ Why Use the Composition API?

• با استفاده از Composition API Using the Composition API

• استفاده از <اسکریپت تنظیم برای اجزای Composition API Using &lt;script setup&gt; for Composition API Components

• واکنش‌پذیر کردن کامپوننت‌ها با Reactivity API Making Components Reactive with the Reactivity API

• مقایسه روش‌های مختلف واکنش‌پذیری Comparing the Different Reactivity Methods

• استفاده از Lifecycle Hooks با Composition API Using Lifecycle Hooks with the Composition API

• بررسی مزایای Composition API Exploring the Benefits of the Composition API

• خلاصه Summary

Styling Components Vue Styling Vue Components

• معرفی Introduction

• سبک های کامپوننت جهانی در مقابل دامنه Global Versus Scoped Component Styles

• یک ظاهر طراحی شده اجزای کودک Styling Child Components

• اعمال مشروط سبک ها با اتصالات سبک Conditionally Applying Styles with Style Bindings

• اعمال مشروط کلاس ها با کلاس Bindings Conditionally Applying Classes with Class Bindings

• استفاده از Bindings در Component Styles Using Bindings in Component Styles

• استفاده از SASS و سایر پیش پردازنده های CSS Using SASS and Other CSS Pre-processors

• خلاصه Summary

برقراری ارتباط بین اجزای Vue Communicating Between Vue Components

• معرفی Introduction

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

• انتقال داده ها به اجزای کودک با لوازم جانبی Passing Data to Child Componets with Props

• اعتبار سنجی لوازم Validating Props

• انتقال داده به اجزای والد با رویدادها Passing Data to Parent Components with Events

• قلاب‌های چرخه حیات مجدداً بازبینی شدند Lifecycle Hooks Revisited

• استفاده از ارائه/تزریق برای انتقال داده به اجزای عمیق تودرتو Using Provide/Inject to Pass Data to Deeply Nested Components

• اسلات ها: تزریق محتوا به اجزای کودک Slots: Injecting Content Into Child Components

• استفاده از اسلات های نامگذاری شده Using Named Slots

• خلاصه Summary

مسیریابی و ناوبری Vue Vue Routing and Navigation

• معرفی Introduction

• اضافه کردن مسیریابی به برنامه ما Adding Routing to Our App

• پیوند دادن به صفحات مسیریابی Linking to Routed Pages

• شکل دادن به پیوندها بر اساس مسیر فعال Styling Links Based on the Active Route

• کار با Route Params Working with Route Params

• عبور پارامترهای مسیر به عنوان Props Passing Route Params as Props

• تغییر حالت تاریخچه روتر Changing the Router History Mode

• خلاصه Summary

مدیریت وضعیت برنامه Vue با Pinia Managing Vue Application State with Pinia

• معرفی Introduction

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

• ایجاد فروشگاه پینیا Creating a Pinia Store

• درک مبانی پینیا Understanding Pinia's Basics

• ذخیره و دسترسی به داده ها در فروشگاه Pinia Storing and Accessing Data in a Pinia Store

• حفظ واکنش پذیری با وضعیت فروشگاه Maintaining Reactivity with Store State

• استفاده از داده های محاسبه شده (Getters) از فروشگاه Pinia Using Calculated Data (Getters) from a Pinia Store

• استفاده از Pinia Store Actions برای واکشی داده از یک API Using Pinia Store Actions to Fetch Data from an API

• استفاده از Options Store Using an Options Store

• استفاده از Stores در Options API Components Using Stores in Options API Components

• خلاصه Summary

ایجاد دستورالعمل های سفارشی Vue Creating Custom Vue Directives

• معرفی Introduction

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

• انتقال داده ها به دستورالعمل ها Passing Data to Directives

• استفاده از قلاب چرخه حیات راهنمای Using Directive Lifecycle Hooks

• اعلام دستورالعمل ها در سطح جهانی Declaring Directives Globally

• خلاصه Summary

استقرار برنامه های Vue در تولید Deploying Vue Applications to Production

• معرفی Introduction

• ایجاد یک ساخت تولید با Vue CLI و Vite Creating a Production Build with the Vue CLI and Vite

• استفاده از متغیرهای محیطی و حالت‌های ساخت Using Environment Variables and Build Modes

• استقرار در یک وب سرور تولید Deploying to a Production Webserver

• مدیریت پیوند عمیق در سرور Handling Deep Linking on the Server

• بررسی پیکربندی بسته وب داخلی Inspecting the Built-in Webpack Config

• سفارشی کردن پیکربندی Webpack Customizing the Webpack Config

• سفارشی کردن Vite Config Customizing Vite Config

• خلاصه Summary