آموزش Vue 3 Bootcamp - راهنمای کامل توسعه دهندگان

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

معرفی Introduction

• معرفی Introduction

• کمی راه اندازی A Little Bit of Setup

مقدمه ای بر Vue An Introduction to Vue

• VueJS چیست؟ What is VueJS

• ساخت قالب HTML Building the HTML Template

• سبک کردن برنامه ما با CSS Styling Our App With CSS

• کاربردی کردن آن با جاوا اسکریپت Making it Functional With JavaScript

• ایجاد یک برنامه Vue Creating a Vue App

• بازسازی برنامه در Vue Rebuilding the App in Vue

• Vue vs Vanilla JS Vue vs Vanilla JS

غواصی عمیق تر در Vue Diving Deeper in Vue

• نصب Dependencies مورد نیاز Installing Needed Dependencies

• چرخش سرور توسعه Vue Spinning Up a Vue Development Server

• برخی از اصطلاحات مهم Some Important Terminologies

• ایجاد HTML با قالب های Vue Creating HTML With Vue Templates

• سبک دادن به برنامه ما Styling Our App

• دسترسی به متغیرها در HTML ما Accessing Variables Within Our HTML

• اضافه کردن رویداد Handlers Adding Event Handlers

• تعریف متغیر ما به عنوان حالت Defining Our Variable as State

• Composition API vs Options API Composition API vs Options API

دستورالعمل های Vue Vue Directives

• نمای کلی برنامه App Overview

• [اختیاری] ساخت HTML و CSS [OPTIONAL] Building the HTML and CSS

• رندر شرطی با v-if Conditional Rendering With v-if

• صحافی دو طرفه با مدل v Two Way Binding With v-model

• مدیریت رویداد با ایجاد یک یادداشت جدید Event Handling By Creating a New Note

• رندر تکراری عناصر DOM با v-for Iteratively Rendering DOM Elements With v-for

• اهمیت یک کلید The Importances of a Key

• اضافه کردن Error Handling Adding Error Handling

قطعات و لوازم جانبی Components and Props

• نمای کلی برنامه App Overview

• [اختیاری] HTML و CSS [OPTIONAL] The HTML and CSS

• ارائه کارت لیست List Card Rendering

• تماشای تغییرات ایالتی Watching For State Changes

• تفکیک کد ما به اجزاء Separating Our Code Into Components

• انتقال داده به کامپوننت ها از طریق Props Passing Data to Components via Props

صفحات و مسیریابی Pages and Routing

• مقدمه ای بر مسیریابی Introduction to Routing

• ایجاد یک برنامه جدید Creating a New App

• ایجاد دو کامپوننت مشاهده Creating Two View Components

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

• RouterLink برای پیمایش در برنامه RouterLink to Navigate Within the App

• استایل دهی Active RouterLink Styling the Active RouterLink

• صفحات با مسیرهای پویا Pages With Dynamic Paths

• استخراج پارامترهای مسیر Extracting the Path Params

• قدرت مسیرهای تودرتو The Powers of Nested Routes

• به صورت برنامه ای مسیر را تنظیم کنید Programmatically Adjust the Route

• افزودن 404 صفحه یافت نشد Adding 404 Not Found Pages

• تغییر مسیر مسیرها Redirect Routes

• مسیریابی برنامه مسابقه ما Routing Our Quiz App

تکمیل برنامه مسابقه ما Completing Our Quiz App

• HTML و CSS صفحه آزمون Quiz Page HTML and CSS

• تفکیک کد به کامپوننت Separating Code Into Components

• پاس دادن به مؤلفه سؤال Passing Props to the Question Component

• گوش دادن به تغییرات با ساعت Listening to Changes With Watch

• محاسبه مقادیر با حالت Computing Values With State

• محاسبات بیشتر... More Computing...

• انتقال داده ها از کودک به والدین Passing Data From the Child to the Parent

• انتشار یک رویداد از مؤلفه کودک Emitting an Event From the Child Component

• تکمیل آزمون Completing the Quiz

انیمیشن برای یک برنامه تعاملی و روان Animations For an Interactive and Fluid App

• مقدمه ای بر انیمیشن Vue Introduction to Vue Animations

• جزء انتقال The Transition Component

• متحرک سازی هنگام خروج یک جزء Animating When a Component Leaves

• انیمیشن های رندر شرطی Conditional Rendering Animations

• ساخت یک اپلیکیشن کوچک Building a Small App

• TransitionGroup برای متحرک سازی چندین عنصر TransitionGroup to Animate Multiple Elements

• متحرک کردن کارت های دیگر در محل Animating the Other Cards Into Place

• انیمیشن های مسیریابی Routing Animations

• متحرک سازی در هنگام رندر Animating Upon Rendering

• چرخه حیات قلاب انتقال Lifecycle Hook of the Transition

• استایل بندی انیمیشن با جاوا اسکریپت Animation Styling With JavaScript

API برای واکشی داده ها درخواست می کند API Requests to Fetch Data

• نمای کلی برنامه App Overview

• فرآیند واکشی داده ها از یک API The Process of Fetching Data From an API

• ایجاد اپلیکیشن Creating the App

• کجا داده ها را واکشی کنیم Where to Fetch the Data

• ایجاد درخواست های HTTP Making the HTTP Requests

• جزء تعلیق The Suspense Component

• درخواست افست و محدودیت Request Offsets and Limits

• پیاده سازی صفحه بندی Implementing Paginations

• ساخت رابط کاربری Building the UI

• یک اصلاح کوچک A Little Fix

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

• واکشی داده با onMounted Fetching Data With onMounted

• اسلات برای HTML پویا Slots For Dynamic HTML

• اطلاعات بیشتر در مورد اسلات More on Slots

• افزودن وضعیت بارگیری بهتر Adding a Better Loading State

• ایجاد کامپوننت هدر Creating the Header Component

• حفظ حالت با KeepAlive Maintaining State With KeepAlive

مدیریت دولتی در Vue State Managements in Vue

• مقدمه ای بر مدیریت دولتی Introduction to State Management

• ساخت یک پروژه کوچک Building a Small Project

• اعلام حالت با واکنشگر Declaring State With Reactive

• Ref vs Reactive Ref vs Reactive

• بسیاری از اجزای تو در تو A Lot of Nested Components

• حفاری پایه Prop Drilling

• ارائه/تزریق Provide/Inject

• ذخیره منطق قابل استفاده مجدد با Composables Store Reusable Logic With Composables

• ایالت جهانی با پینیا Global State With Pinia

Vue با TypeScript Vue With TypeScript

• مقدمه ای بر TypeScript An Introduction to TypeScript

• یک درس TypeScript اختیاری An Optional TypeScript Lesson

• ساخت اپلیکیشن HTML Building the HTML App

• انواع با حالت Types With State

• انواع با توابع Types With Functions

• انواع با لوازم جانبی Types With Props

• انواع با محاسبه Types With Computed

• استفاده مجدد از انواع ما در چندین مؤلفه Reusing Our Types Throughout Multiple Components

شروع پروژه کپستون CAPSTONE PROJECT START

• بررسی اجمالی پروژه Project Overview

ساخت رابط کاربری با کتابخانه Vue Building the UI With a Vue Library

• دو گزینه شما Your Two Options

• راه اندازی برنامه Vue Setting Up the Vue App

• ساخت NavBar Building the NavBar

• ساخت مدال Building the Modal

• ساخت جدول زمانی Building the Timeline

• افزودن نمای نمایه Adding a Profile View

• اضافه کردن نوار کاربر Adding the User Bar

• افزودن گالری تصاویر Adding an Image Gallary

شناسایی کاربران با احراز هویت Identifying Users With Authentication

• مقدمه ای بر احراز هویت An Introduction to Authentication

• Supabase - Backend به عنوان یک سرویس Supabase - A Backend as a Service

• اتصال برنامه Vue ما به Supabase Connecting Our Vue App to Supabase

• ایجاد فروشگاه کاربر Pinia Creating a Pinia User Store

• افزودن اعتبار سنجی ورودی Adding Input Validation

• اعتبار سنجی مشتری در مقابل Backend Client vs Backend Validation

• ثبت نام کاربر Signing Up the User

• در صورتی که کاربر قبلاً ثبت نام کرده باشد اعتبار سنجی می شود Validating if the User is Already Registered

• بهبود انتقال خطا Improving Error Handing

• افزودن حالت بارگذاری برای مدال Adding a Loading State For the Modal

• رسیدگی به پرونده موفقیت Handling the Success Case

• اضافه کردن منطق ورود Adding the Login Logic

• تداوم وضعیت ورود Persisting the Login State

• وضعیت بارگیری برای بازیابی کاربر A Loading State for Retrieving the User

• رسیدگی به خروج Handling Logout

آپلود و نمایش عکس ها Uploading and Displaying Photos

• پیمایش به نمایه کاربر Navigating to the User's Profile

• رندر کردن مشروط آپلود عکس مدال Conditionally Rendering the Upload Photo Modal

• افزودن عناصر ورودی Adding the Input Elements

• ایجاد یک سطل برای ذخیره سازی فایل Creating a Bucket For File Storage

• آپلود برنامه ای عکس Programmatically Uploading a Photo

• به روز رسانی سیاست تصویر Updating the Image Policy

• ایجاد جدول پست ها Creating the Posts Table

• افزودن پست به DB ما Adding a Post to Our DB

• اضافه کردن حالت بارگیری Adding a Loading State

• مدیریت وضعیت موفقیت Handling the Success State

• واکشی پست ها پس از رندر Fetching Posts Upon Render

• اضافه کردن حالت بارگیری Adding a Loading State

روابط داده های پیچیده Complex Data Relations

• ساخت جدول فالوورهای زیر Building a Following Follower Table

• رندر کردن مشروط دکمه دنبال کردن Conditionally Rendering a Follow Button

• فعال کردن کامپوننت پروفایل Making the Profile Component Reactive

• پیاده سازی عملکرد Follow User Implementing the Follow User Functionality

• تعیین اطلاعات فالوور در رندر Determining Follower Info on Render

• پیاده سازی عملکرد Unfollow Implementing the Unfollow Functionality

• جابه‌جایی دکمه‌های دنبال کردن/دنبال کردن Toggling the Follow/Following Buttons

• انجام پرس و جوهای جمعی Performing Aggregate Queries

صفحه بندی بر اساس اسکرول Scroll Based Pagination

• وضعیت Auth را در صفحه تایم لاین بررسی کنید Check Auth Status in Timeline Page

• تفکیک HTML به کامپوننت Separating HTML into Components

• واکشی دنبال کنندگان Fetching the Followers

• واکشی پست های دنبال کنندگان Fetching the Followers' Posts

• رندر کردن پست ها Rendering the Posts

• مرتب سازی بر اساس جدیدترین Sorting By Most Recent

• بیایید کمی ریاضی انجام دهیم Let's Do Some Math

• Intersection Observer API The Intersection Observer API

• انتشار یک رویداد در تقاطع Emitting an Event on Intersect

• پیاده سازی صفحه بندی Implementing the Pagination

• توقف درخواست های غیر ضروری HTTP Stopping Unnecessary HTTP Requests

• ذخیره داده ها در متغیرهای محیطی Saving Data in Environment Variables