آموزش Vue - راهنمای کامل (شامل Vue Router، Vuex و Composition API) [ویدئو]

Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Vue.js یک فریمورک بسیار محبوب است که نه تنها برای برنامه‌های موبایل، بلکه برای برنامه‌های مرورگر، یک تجربه کاربری واکنش‌پذیر و عالی ارائه می‌دهد. از این رو، این پردرآمدترین در صنعت توسعه فرانت اند است. این دوره با مقدمه ای بر Vue.js شروع می شود و توضیح می دهد که چرا یک چارچوب جاوا اسکریپت عالی است. سپس سینتکس ها و قالب های اولیه Vue.js را یاد خواهید گرفت و نحوه خروجی داده های واکنشی و مدیریت رویدادهای صفحه کلید را خواهید دید. در ادامه، نحوه تعامل با Document Object Model (DOM) و تنظیم یک محیط توسعه و گردش کار با Vue CLI را خواهید آموخت. سپس اجزای مختلف را مرور می کنیم و نحوه کار با فرم ها و درخواست های HTTP را به شما نشان می دهیم. در مرحله بعد، یاد خواهید گرفت که چگونه اپلیکیشن خود را با انیمیشن ها و انتقال ها جذاب کنید و اهمیت مسیریابی و Vuex را در Vue.js درک کنید. در نهایت، ما یک برنامه معامله گر سهام ایجاد می کنیم و مراحل استقرار یک برنامه Vue.js را یاد می گیریم. همچنین یاد خواهید گرفت که چگونه به جای منابع Vue از Axios استفاده کنید و زیر مفاهیم احراز هویت در برنامه های Vue خط بکشید. در پایان این دوره، شما مهارت های ضروری Vue.js مورد نیاز برای توسعه وب پیشانی و توسعه برنامه های کاربردی مرورگر واکنشی را خواهید داشت. تمام منابع این دوره در https://github.com/PacktPublishing/Vue---The-Complete-Guide-incl.-Vue-Router-Vuex-and-Composition-API موجود است- درک کنید Vue.js چیست و کاربردهای آن محیط توسعه دهنده و گردش کار را با CLI تنظیم کنید یک برنامه منبع یادگیری برای درک اجزا، فرم ها و استایل ایجاد کنید یک اپلیکیشن تک صفحه ای برای درک مسیریابی بسازید نحوه پیاده سازی انیمیشن ها و انتقال ها در برنامه های Vue را بیاموزید بهبود مدیریت حالت با استفاده از Vuex اگر یک مهندس نرم افزار یا توسعه دهنده وب هستید که به توسعه frontend علاقه مند هستید یا می خواهید برنامه های مرورگر واکنشی را با استفاده از Vue.js بسازید، این دوره برای شما مناسب است. برای شروع این دوره، دانش اولیه جاوا اسکریپت، HTML و CSS ضروری است. آشنایی با Vue.js و نحوه استفاده از آن در پروژه‌های دنیای واقعی * آخرین نسخه Vue، از جمله API ترکیبی کاملاً جدید را کاوش کنید * برای ساخت برنامه‌های ساده تا بزرگ در سطح سازمانی در Vue.js آماده شوید.

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

شروع شدن Getting Started

  • به دوره خوش آمدید! Welcome to the Course!

  • Vue.js چیست؟ What is Vue.js?

  • روش های مختلف استفاده از Vue Different Ways of Using Vue

  • کاوش گزینه های Vue Exploring Vue Alternatives

  • ساختن اولین برنامه خود با جاوا اسکریپت Building Your First App with JavaScript

  • ساخت مجدد برنامه با Vue.js Re-Building the App with Vue.js

  • Vue Versus Vanilla JavaScript (فقط جاوا اسکریپت) Vue Versus Vanilla JavaScript (Just JavaScript)

  • راه اندازی محیط توسعه دوره Setting Up the Course Development Environment

  • خلاصه و محتویات دوره Course Outline and Contents

  • چگونه از این دوره بیشترین بهره را ببرید How to Get the Most Out of This Course

مفاهیم اولیه و اصلی - تعامل مدل شی سند (DOM) با Vue Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue

  • معرفی ماژول Module Introduction

  • ایجاد و اتصال نمونه های برنامه Vue Creating and Connecting Vue App Instances

  • درون یابی و اتصال داده ها Interpolation and Data Binding

  • ویژگی های الزام آور با دستورالعمل "V-Bind". Binding Attributes with the “V-Bind” Directive

  • آشنایی با "روش ها" در Vue Apps Understanding “Methods” in Vue Apps

  • کار با داده ها در داخل یک برنامه Vue Working with Data Inside a Vue App

  • خروجی محتوای خام HTML با V-html Outputting Raw HTML Content with V-html

  • خلاصه اول First Summary

  • درک رویداد Binding Understanding Event Binding

  • رویدادها و روش ها Events and Methods

  • کار با رویدادها و استدلال ها Working with Events and Arguments

  • استفاده از Native Event Object Using the Native Event Object

  • کاوش در اصلاح کننده های رویداد Exploring Event Modifiers

  • قفل کردن محتوا با V-Once Locking Content with V-Once

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

  • روش های مورد استفاده برای اتصال داده ها: چگونه کار می کند؟ Methods Used for Data Binding: How it Works?

  • معرفی ویژگی های محاسبه شده Introducing Computed Properties

  • کار با Watchers Working with Watchers

  • روش ها در مقابل ویژگی های محاسبه شده در مقابل ناظران Methods Versus Computed Properties Versus Watchers

  • V-Bind و V-On Shorthands V-Bind and V-On Shorthands

  • یک ظاهر طراحی پویا با سبک های درون خطی Dynamic Styling with Inline Styles

  • اضافه کردن کلاس های CSS به صورت پویا Adding CSS Classes Dynamically

  • کلاس ها و ویژگی های محاسبه شده Classes and Computed Properties

  • کلاس های دینامیک: نحو آرایه Dynamic Classes: Array Syntax

  • خلاصه ماژول Module Summary

ارائه محتوا و فهرست های مشروط Rendering Conditional Content and Lists

  • معرفی ماژول Module Introduction

  • درک مسئله Understanding the Problem

  • ارائه محتوا به صورت مشروط Rendering Content Conditionally

  • V-if، V-else و V-else-if V-if, V-else, and V-else-if

  • استفاده از V-show به جای V-if Using V-show Instead of V-if

  • رندر کردن لیست داده ها Rendering Lists of Data

  • غواصی عمیق تر در v-For Diving Deeper into v-For

  • حذف موارد فهرست Removing List Items

  • گوش دادن به رویدادها Listening to Events

  • خلاصه ماژول Module Summary

پروژه دوره: بازی قاتل هیولا Course Project: The Monster Slayer Game

  • معرفی ماژول Module Introduction

  • راه اندازی پروژه و روش های اول Project Setup and First Methods

  • به روز رسانی Healthbars Updating the Healthbars

  • افزودن یک "حمله ویژه". Adding a “Special Attack”

  • افزودن یک عملکرد "Heal". Adding a “Heal” Functionality

  • افزودن یک صفحه نمایش «بازی بیش از حد». Adding a “Game Over” Screen

  • اتمام کارکرد اصلی Finishing the Core Functionality

  • اضافه کردن یک گزارش نبرد Adding a Battle Log

Vue: پشت صحنه Vue: Behind the Scenes

  • معرفی ماژول Module Introduction

  • مقدمه ای بر واکنش پذیری Vue An Introduction to Vue's Reactivity

  • Vue Reactivity: A Deep Dive Vue Reactivity: A Deep Dive

  • یک برنامه در مقابل چندین برنامه One App Versus Multiple Apps

  • درک قالب ها Understanding Templates

  • کار با Refs Working with Refs

  • چگونه Vue مدل شیء سند (DOM) را به روز می کند How Vue Updates the Document Object Model (DOM)

  • چرخه حیات برنامه Vue - تئوری Vue App Lifecycle – Theory

  • چرخه عمر برنامه Vue - تمرین کنید Vue App Lifecycle – Practice

معرفی کامپوننت ها Introducing Components

  • معرفی ماژول Module Introduction

  • درک مسئله Understanding the Problem

  • معرفی کامپوننت ها Introducing Components

  • ایجاد رابط های کاربری پیچیده با کامپوننت ها Building Complex User Interfaces with Components

با Vue CLI به یک تنظیم و گردش کار بهتر توسعه می‌روید Moving to a Better Development Setup and Workflow with the Vue CLI

  • معرفی ماژول Module Introduction

  • چرا به سرور توسعه نیاز دارید؟ Why You Need a Development Server?

  • چرا تجربه توسعه دهنده بهتری می خواهید؟ Why You Want a Better Developer Experience?

  • نصب و استفاده از Vue CLI Installing and Using the Vue CLI

  • بازرسی پروژه ایجاد شده Inspecting the Created Project

  • بررسی کد Vue و فایل‌های “.vue†Inspecting the Vue Code and “.vue” Files

  • افزودن پسوند “Veturâ € به کد ویژوال استودیو Adding the “Vetur” Extension to Visual Studio Code

  • اطلاعات بیشتر در “.vueâ € Files More on “.vue” Files

  • پروژه Vue جدید A New Vue Project

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

  • افزودن کامپوننت Adding a Component

  • اضافه کردن یک ظاهر طراحی شده Adding Styling

ارتباط مؤلفه Component Communication

  • معرفی ماژول Module Introduction

  • معرفی “Props†(والد => ارتباط کودک) Introducing “Props” (Parent => Child Communication)

  • رفتار سرپایی و تغییر لوازم Prop Behavior and Changing Props

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

  • کار با Dynamic Prop Values Working with Dynamic Prop Values

  • انتشار رویدادهای سفارشی (فرزند => ارتباط والدین) Emitting Custom Events (Child => Parent Communication)

  • تعریف و اعتبارسنجی رویدادهای سفارشی Defining and Validating Custom Events

  • نسخه ی نمایشی: افزودن کامپوننت ها و اتصال آنها Demo: Adding Components and Connecting Them

  • نسخه ی نمایشی: افزودن ارتباطات کامپوننت بیشتر Demo: Adding More Component Communication

  • یک مشکل بالقوه A Potential Problem

  • ارائه + تزریق برای نجات Provide + Inject to the Rescue

  • ارائه + تزریق برای توابع/روش ها Provide + Inject for Functions/Methods

  • ارائه + Inject در مقابل Props و رویدادهای سفارشی Provide + Inject Versus Props and Custom Events

  • خلاصه ماژول Module Summary

غواصی عمیق تر در اجزا Diving Deeper into Components

  • معرفی ماژول Module Introduction

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

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

  • سبک های محدوده Scoped Styles

  • معرفی اسلات ها Introducing Slots

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

  • سبک های اسلات و تالیف Slot Styles and Compilation

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

  • اسلات های محدوده Scoped Slots

  • اجزای دینامیک Dynamic Components

  • زنده نگه داشتن اجزای پویا Keeping Dynamic Components Alive

  • استفاده از آنچه می دانید + یک مشکل Applying What You Know + a Problem

  • عناصر انتقال از راه دور Teleporting Elements

  • کار با Fragments Working with Fragments

  • راهنمای سبک Vue The Vue Style Guide

  • حرکت به یک ساختار پوشه متفاوت Moving to a Different Folder Structure

  • خلاصه ماژول Module Summary

پروژه دوره: اپلیکیشن منابع یادگیری Course Project: The Learning Resources App

  • معرفی ماژول Module Introduction

  • راه اندازی و مراحل اولیه Setup and First Steps

  • اولین جزء و پایه First Component and Prop

  • یک ظاهر طراحی و اجزای بیشتر Styling and More Components

  • اجزای هدر و کارت پایه Header and BaseCard Components

  • اضافه کردن دکمه پایه Adding a Base Button

  • مؤلفه‌های پویا و ویژگی Fallthrough Dynamic Components and the Fallthrough Attribute

  • افزودن و استایل دادن به برگه ها Adding and Styling Tabs

  • افزودن فرم Adding a Form

  • واکشی ورودی کاربر Fetching User Input

  • افزودن یک دیالوگ مودال Adding a Modal Dialog

  • حذف موارد Deleting Items

  • اضافه کردن “Teleport†Adding “Teleport”

تشکیل می دهد Forms

  • معرفی ماژول Module Introduction

  • V-Model و ورودی ها V-Model and Inputs

  • کار با V-Model Modifiers و Numbers Working with V-Model Modifiers and Numbers

  • V-Model و Dropdowns V-Model and Dropdowns

  • استفاده از V-Model با چک باکس ها و دکمه های رادیویی Using V-Model with Checkboxes and Radio Buttons

  • افزودن اعتبار سنجی فرم پایه Adding Basic Form Validation

  • ساخت کامپوننت کنترل سفارشی Building a Custom Control Component

  • استفاده از V-Model بر روی کامپوننت های سفارشی Using V-Model on Custom Components

  • خلاصه ماژول Module Summary

ارسال درخواست های HTTP Sending HTTP Requests

  • معرفی ماژول Module Introduction

  • راه‌اندازی برنامه و دلیل نیاز به Backend Starting App and Why You Need a Backend

  • اضافه کردن Backend Adding a Backend

  • نحوه (نه) ارسال درخواست های HTTP How to (Not) Send HTTP Requests

  • ارسال یک درخواست POST برای ذخیره داده ها Sending a POST Request to Store Data

  • دریافت داده (درخواست دریافت) و تغییر داده های پاسخ Getting Data (GET Request) and Transforming Response Data

  • بارگیری داده ها هنگام نصب کامپوننت Loading Data When a Component Mounts

  • نمایش پیام “Loading…†Showing a “Loading…” Message

  • مدیریت وضعیت «بدون داده». Handling the “No Data” State

  • رسیدگی به خطاهای فنی/سمت مرورگر Handling Technical/Browser-Side Errors

  • رسیدگی به پاسخ های خطا Handling Error Responses

  • خلاصه ماژول Module Summary

مسیریابی: ساخت برنامه های کاربردی چند صفحه ای Routing: Building “Multi-Page” Single Page Applications

  • معرفی ماژول Module Introduction

  • مسیریابی: چه چیزی و چرا؟ Routing: What and Why?

  • راه اندازی مسیریابی Routing Setup

  • ثبت و ارائه مسیرها Registering and Rendering Routes

  • پیمایش با Router-link Navigating with Router-link

  • سبک دادن به پیوندهای فعال Styling Active Links

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

  • انتقال داده با پارامترهای مسیر (بخش های پویا) Passing Data with Route Params (Dynamic Segments)

  • مسیریابی و مسیرهای پویا Navigation and Dynamic Paths

  • به روز رسانی داده های Params با Watchers Updating Params Data with Watchers

  • پاس دادن Params به عنوان Props Passing Params as Props

  • تغییر مسیر و مسیرهای "Catch All". Redirecting and “Catch All” Routes

  • استفاده از مسیرهای تودرتو Using Nested Routes

  • سرگرمی بیشتر با مسیرهای نامگذاری شده و اشیاء مکان More Fun with Named Routes and Location Objects

  • استفاده از Query Params Using Query Params

  • ارائه چندین مسیر با نماهای روتر نامگذاری شده Rendering Multiple Routes with Named Router Views

  • کنترل رفتار اسکرول Controlling Scroll Behavior

  • معرفی گاردهای ناوبری Introducing Navigation Guards

  • غواصی عمیق تر در گاردهای ناوبری Diving Deeper into Navigation Guards

  • گارد جهانی «بعد از هرکدام». The Global “afterEach” Guard

  • فراتر از ورود: نگهبانان مسیر را ترک کنید Beyond Entering: Route Leave Guards

  • استفاده از فراداده مسیر Utilizing Route Metadata

  • سازماندهی فایل های مسیر Organizing Route Files

  • خلاصه Summary

انیمیشن ها و انتقال ها Animations and Transitions

  • معرفی ماژول Module Introduction

  • مبانی انیمیشن و انتقال CSS Animation Basics and CSS Transitions

  • آشنایی با انیمیشن های CSS Understanding CSS Animations

  • چرا «فقط CSS» کافی نیست؟ Why Is “Just CSS” Not Enough?

  • پخش انیمیشن های CSS با کمک Vue Playing CSS Animations with Vue's Help

  • استفاده از مولفه انتقال Using the Transition Component

  • انیمیشن های CSS با مولفه انتقال CSS Animations with the Transition Component

  • استفاده از نام‌های کلاس CSS سفارشی Using Custom CSS Class Names

  • مثال: متحرک سازی یک مدال Example: Animating a Modal

  • انتقال بین چندین عنصر Transitioning Between Multiple Elements

  • استفاده از رویدادهای انتقال Using Transition Events

  • ایجاد انتقال جاوا اسکریپت (به جای CSS) Building JavaScript Transitions (Instead of CSS)

  • غیرفعال کردن CSS Transitions Disabling CSS Transitions

  • شروع کار با لیست های متحرک Getting Started with Animated Lists

  • متحرک کردن لیست ها با "گروه انتقال". Animating Lists with “Transition-Group”

  • متحرک کردن حرکت آیتم لیست Animating List Item Movement

  • متحرک سازی تغییرات مسیر Animating Route Changes

Vuex Vuex

  • معرفی ماژول Module Introduction

  • Vuex: چی و چرا؟ Vuex: What and Why?

  • ایجاد و استفاده از فروشگاه Creating and Using a Store

  • اتصال کامپوننت ها به حالت Connecting Components to State

  • معرفی جهش - روشی بهتر برای تغییر داده ها Introducing Mutations - A Better Way of Changing Data

  • انتقال داده ها به جهش با بارگذاری Passing Data to Mutations with Payloads

  • معرفی Getters - روشی بهتر برای دریافت داده Introducing Getters - A Better Way of Getting Data

  • اجرای کد Async با Actions Running Async Code with Actions

  • درک عمل “Context†Understanding the Action “Context”

  • استفاده از Mapper Helpers Using Mapper Helpers

  • مثال: افزودن ایالات بیشتر Example: Adding More States

  • سازماندهی فروشگاه خود با ماژول ها Organizing Your Store with Modules

  • درک وضعیت ماژول محلی Understanding Local Module State

  • ماژول های فضای نام Namespacing Modules

  • ساختار کد Vuex و فایل ها Structuring Vuex Code and Files

  • یک چالش! A Challenge!

  • راه حل چالش – قسمت 1 Challenge Solution – Part 1

  • راه حل چالش - قسمت 2 Challenge Solution – Part 2

  • راه حل چالش – قسمت 3 Challenge Solution – Part 3

  • خلاصه Summary

پروژه اصلی: "پیدا کردن یک مربی" برنامه وب Main Project: “Find a Coach” Web App

  • معرفی ماژول Module Introduction

  • برنامه ریزی پروژه/برنامه وب Planning the Project/Web App

  • برنامه ریزی داده های مورد نیاز Planning the Data Requirements

  • برنامه ریزی چیدمان/اجزاء Planning the Layout/Components

  • ثبت مسیرها Registering Routes

  • افزودن اجزای صفحه مسیر Adding Route Page Components

  • کار بر روی چیدمان اصلی و استایل Working on the Main Layout and Styling

  • سیم کشی صفحات Wiring Up Pages

  • افزودن داده های Vuex و Coach Adding Vuex and Coach Data

  • کار بر روی فهرست مربیان و موارد فهرست Working on the Coaches List and List Items

  • افزودن چند مولفه پایه (کارت پایه، دکمه پایه، نشان پایه) Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

  • ساخت مولفه جزئیات مربی Building the Coach Detail Component

  • فیلترینگ مربیان Filtering Coaches

  • ثبت نام به عنوان مربی: فرم Registering as a Coach: The Form

  • اضافه کردن کوچ به Vuex Adding Coaches to Vuex

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

  • کار بر روی فرم تماس Working on the Contact Form

  • ذخیره سازی درخواست ها (پیام ها) با Vuex Storing Requests (Messages) with Vuex

  • خروجی درخواست های دریافتی (پیام ها) Outputting Incoming Requests (Messages)

  • فیلتر کردن درخواست‌ها برای مربی فعال Filtering Requests for the Active Coach

  • ارسال یک درخواست PUT HTTP برای ذخیره داده های مربی Sending a PUT HTTP Request to Store Coach Data

  • واکشی داده های مربی (دریافت درخواست HTTP) Fetching Coach Data (GET HTTP Request)

  • ارائه یک اسپینر در حال بارگذاری Rendering a Loading Spinner

  • اضافه کردن مدیریت خطای HTTP Adding HTTP Error Handling

  • ارسال درخواست های کوچینگ با استفاده از درخواست های HTTP Sending Coaching Requests Using HTTP Requests

  • ذخیره داده های پاسخ HTTP Caching HTTP Response Data

  • اضافه کردن مسیر انتقال Adding Route Transitions

  • صفحه و خلاصه "یافت نشد". The “Not Found” Page and Summary

Vue و احراز هویت Vue and Authentication

  • معرفی ماژول Module Introduction

  • احراز هویت در برنامه های Vue [یا هر برنامه تک صفحه ای (SPA)] چگونه کار می کند؟ How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?

  • قفل کردن/محافظت از منابع باطن Locking/Protecting Backend Resources

  • افزودن صفحه احراز هویت (ورود به سیستم و ثبت نام) Adding an Authentication Page (Login and Signup)

  • آماده سازی Vuex Preparing Vuex

  • افزودن یک اقدام و جریان "ثبت نام". Adding a “Signup” Action and Flow

  • UX بهتر: بارگیری اسپینر و مدیریت خطا Better UX: Loading Spinner and Error Handling

  • افزودن یک اکشن و جریان «ورود». Adding a “Login” Action and Flow

  • پیوست کردن توکن به درخواست‌های خروجی Attaching the Token to Outgoing Requests

  • به روز رسانی UI بر اساس وضعیت Auth Updating the UI Based on Auth State

  • افزودن یک «خروج» Action and Flow Adding a “Logout” Action and Flow

  • احراز هویت و مسیریابی (از جمله گاردهای ناوبری) Authentication and Routing (Including Navigation Guards)

  • افزودن «ورود خودکار» Adding “Auto Login”

  • افزودن «خروج خودکار». Adding “Auto Logout”

  • خلاصه Summary

بهینه سازی و استقرار برنامه های Vue Optimizing and Deploying Vue Apps

  • معرفی ماژول Module Introduction

  • چه چیزی را مستقر کنیم؟ What to Deploy?

  • بهینه سازی: با استفاده از اجزای ناهمزمان Optimization: Using Asynchronous Components

  • ساخت پروژه برای تولید Building the Project for Production

  • استقرار یک برنامه Vue Deploying a Vue App

Composition API – جایگزینی API Options The Composition API – Replacing the Options API

  • معرفی ماژول Module Introduction

  • Composition API کدام مشکل را حل می کند؟ Which Problem Does the Composition API Solve?

  • جایگزینی “Data†با Refs Replacing “Data” with “Refs”

  • ساختن اجسام «واکنشی». Building “Reactive” Objects

  • واکنش پذیری: شیرجه عمیق Reactivity: A Deep Dive

  • جایگزینی «روش‌ها» با توابع منظم Replacing “Methods” with Regular Functions

  • جایگزینی «ویژگی‌های محاسبه‌شده» با تابع «محاسبه‌شده» Replacing “Computed Properties” with the “Computed” Function

  • دو طرفه Binding و Composition API Two-Way Binding and the Composition API

  • کار با Watchers Working with Watchers

  • اولین خلاصه A First Summary

  • نحوه استفاده از Refs الگو How to Use Template Refs

  • کامپوننت ها، Props و Composition API Components, Props, and the Composition API

  • انتشار رویدادهای سفارشی Emitting Custom Events

  • کار با ارائه/تزریق Working with Provide/Inject

  • Lifecycle Hooks در Composition API Lifecycle Hooks in the Composition API

  • مهاجرت از Options API به Composition API - یک پروژه نمونه Migrating from Options API to Composition API - An Example Project

  • مهاجرت یک جزء اول Migrating a First Component

  • مهاجرت یک جزء بزرگ Migrating a Big Component

  • مهاجرت اجزای باقیمانده Migrating the Remaining Components

  • Routing، Params و Composition API Routing, Params, and the Composition API

  • Route and Router Objects و Composition API Route and Router Objects and the Composition API

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

  • خلاصه Summary

قابلیت استفاده مجدد: ترکیبات و توابع ترکیب سفارشی Reusing Functionality: Mixins and Custom Composition Functions

  • معرفی ماژول Module Introduction

  • مفاهیم قابلیت استفاده مجدد Reusability Concepts

  • استفاده از Mixins Using Mixins

  • ادغام مخلوط ها Merging Mixins

  • میکس های جهانی Global Mixins

  • مضرات Mixins Disadvantages of Mixins

  • Hooks/Composable سفارشی و Composition API Custom Hooks/Composable and the Composition API

  • توابع ترکیب سفارشی بیشتر More Custom Composition Functions

  • چرا Hooks/Composable Beat Mixins؟ Why Hooks/Composable Beat Mixins?

  • مثال: ایجاد قلاب «جستجو». Example: Creating a “Search” Hook

  • گوچاهای قلاب سفارشی Custom Hooks Gotchas

  • افکار بیشتر در مورد قلاب های سفارشی/قابل ترکیب More Thoughts on Custom Hooks/Composable

  • مثال: یک قلاب «مرتب سازی» سفارشی Example: A Custom “Sort” Hook

جمع بندی و مراحل بعدی Roundup and Next Steps

  • جمع بندی دوره و مراحل بعدی Course Roundup and Next Steps

Vue 2 به Vue 3 Migration Vue 2 to Vue 3 Migration

  • Vue 3 - نمای کلی Vue 3 - Overview

  • تغییرات مهم و مراحل مهاجرت Important Changes and Migration Steps

  • Vue 3: ویژگی های جدید Vue 3: New Features

  • New Composition API (اختیاری) The New Composition API (Optional)

  • درباره این دوره و Vue 3 About This Course and Vue 3

شروع به کار [VUE2] Getting Started [VUE2]

  • معرفی دوره Course Introduction

  • ایجاد اولین برنامه Vue.js شما Creating Your First Vue.js Application

  • گسترش برنامه Vue.js Extending the Vue.js Application

  • ساختار دوره Course Structure

  • از تمام منابع دوره استفاده کنید! Take Advantage of All Course Resources!

  • Vue.js را به صورت محلی تنظیم کنید Set Up Vue.js Locally

استفاده از Vue.js برای تعامل با Document Object Model (DOM) [VUE2] Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]

  • معرفی ماژول Module Introduction

  • آشنایی با قالب های Vue.js Understanding Vue.js Templates

  • نحو و نمونه Vue.js چگونه با هم کار می کنند How the Vue.js Template Syntax and Instance Work Together

  • دسترسی به داده ها در نمونه Vue Accessing Data in the Vue Instance

  • صفات الزام آور Binding Attributes

  • درک و استفاده از دستورالعمل ها Understanding and Using Directives

  • Rendering را با V-Once غیرفعال کنید Disable Re-Rendering with V-Once

  • چگونه HTML خام را خروجی کنیم؟ How to Output Raw HTML?

  • گوش دادن به رویدادها Listening to Events

  • دریافت داده های رویداد از شی رویداد Getting Event Data from the Event Object

  • گذراندن استدلال های خود با رویدادها Passing Your Own Arguments with Events

  • اصلاح یک رویداد - با اصلاح کننده های رویداد Modifying an Event - with Event Modifiers

  • گوش دادن به رویدادهای صفحه کلید Listening to Keyboard Events

  • نوشتن کد جاوا اسکریپت در قالب ها Writing JavaScript Code in the Templates

  • استفاده از اتصال دو طرفه Using Two-Way Binding

  • نوشتن کد جاوا اسکریپت در قالب ها Writing JavaScript Code in the Templates

  • واکنش به تغییرات با ویژگی های محاسبه شده Reacting to Changes with Computed Properties

  • جایگزینی برای ویژگی های محاسبه شده: مشاهده تغییرات An Alternative to Computed Properties: Watching for Changes

  • صرفه جویی در زمان با حروف کوتاه Saving Time with Shorthands

  • یک ظاهر طراحی پویا با کلاس های CSS - اصول Dynamic Styling with CSS Classes – Basics

  • استایل پویا با کلاس های CSS - با استفاده از اشیاء Dynamic Styling with CSS Classes - Using Objects

  • استایل پویا با کلاس‌های CSS - استفاده از نام‌ها تنظیم سبک‌ها به صورت پویا (بدون کلاس‌های CSS) Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)

  • استایل دادن به عناصر با نحو آرایه Styling Elements with the Array Syntax

  • بسته بندی ماژول Module Wrap Up

استفاده از فهرست‌های شرطی و رندر [VUE2] Using Conditionals and Rendering Lists [VUE2]

  • معرفی ماژول Module Introduction

  • رندر شرطی با V-If Conditional Rendering with V-If

  • استفاده از V-If Syntax جایگزین Using an Alternative V-If Syntax

  • آن را با V-Show جدا نکنید Don't Detach it with V-Show

  • رندر کردن لیست ها با V-For Rendering Lists with V-For

  • دریافت شاخص فعلی Getting the Current Index

  • استفاده از V-For Syntax جایگزین Using an Alternative V-For Syntax

  • حلقه زدن از طریق اشیاء Looping through Objects

  • حلقه زدن از طریق فهرست اعداد Looping through a List of Numbers

  • ردیابی عناصر در حین استفاده از V-For Keeping Track of Elements While Using V-For

  • بسته بندی ماژول Module Wrap Up

پروژه اولین دوره - قاتل هیولا [VUE2] First Course Project - The Monster Slayer [VUE2]

  • مقدمه و چالش Introduction and Challenge

  • راه اندازی پروژه دوره Setting Up the Course Project

  • ایجاد نمونه Vue و استایل دادن به Healthbars Creating the Vue Instance and Styling the Healthbars

  • نمایش کنترل های پخش کننده به صورت مشروط Showing the Player Controls Conditionally

  • پیاده سازی یک روش "شروع بازی". Implementing a “Start Game” Method

  • پیاده سازی یک روش "حمله". Implementing an “Attack” Method

  • کد بهتری بنویسید - زمان بازآفرینی است! Write better Code - Time for Refactoring!

  • اجرای "حمله ویژه". Implementing a “Special Attack”

  • اجرای یک روش "Heal". Implementing a “Heal” Method

  • اتمام دکمه های اکشن Finishing the Action Buttons

  • ایجاد Action Log Creating an Action Log

  • چاپ گزارش (v-for) Printing the Log (v-for)

  • اتمام گزارش Finishing the Log

  • حالت دادن به گزارش مشروط Styling the Log Conditionally

  • بسته شدن Wrap Up

درک نمونه Vue.js [VUE2] Understanding the Vue.js Instance [VUE2]

  • معرفی ماژول Module Introduction

  • برخی از اصول اولیه در مورد نمونه Vue.js Some Basics about the Vue.js Instance

  • استفاده از چندین نمونه Vue Using Multiple Vue Instances

  • دسترسی به نمونه Vue از خارج Accessing the Vue Instance from Outside

  • Vue.js چگونه داده ها و روش های شما را مدیریت می کند How Vue.js Manages Your Data and Methods

  • A r به $el و $data نگاه کنید A r Look at $el and $data

  • قرار دادن $refs و استفاده از آنها در قالب های خود Placing $refs and Using Them on Your Templates

  • کجا درباره Vue API بیشتر بیاموزیم؟ Where to Learn More about the Vue API?

  • نصب قالب Mounting a Template

  • استفاده از کامپوننت ها Using Components

  • محدودیت های برخی از قالب ها Limitations of Some Templates

  • Vue.js چگونه مدل شیء سند (DOM) را به روز می کند؟ How Vue.js Updates the Document Object Model (DOM)?

  • چرخه حیات نمونه Vue.js The Vue.js Instance Lifecycle

  • چرخه حیات نمونه Vue.js در عمل The Vue.js Instance Lifecycle in Practice

  • بسته بندی ماژول Module Wrap Up

حرکت به یک جریان کاری توسعه واقعی با Webpack و Vue CLI [VUE2] Moving to a “Real” Development Workflow with Webpack and Vue CLI [VUE2]

  • معرفی ماژول Module Introduction

  • چرا به سرور توسعه نیاز دارید؟ Why Do You Need a Development Server?

  • «روی کار توسعه» به چه معناست؟ What Does “Development Workflow” Mean?

  • استفاده از Vue CLI برای ایجاد پروژه ها Using the Vue CLI to Create Projects

  • نصب Vue CLI و ایجاد یک پروژه جدید Installing the Vue CLI and Creating a New Project

  • نمای کلی ساختار پوشه Webpack Template Overview of the Webpack Template Folder Structure

  • درک فایل های “.vueâ € Understanding the “.vue” Files

  • درک شیء در فایل Vue Understanding the Object in the Vue File

  • چگونه اپلیکیشن خود را برای تولید بسازید How to Build Your App for Production

  • بسته بندی ماژول Module Wrap Up

مقدمه ای بر کامپوننت ها [VUE2] An Introduction to Components [VUE2]

  • معرفی ماژول Module Introduction

  • مقدمه ای بر کامپوننت ها An Introduction to Components

  • ذخیره داده ها در کامپوننت ها با روش داده Storing Data in Components with the Data Method

  • ثبت قطعات به صورت محلی و جهانی Registering Components Locally and Globally

  • “Root Component†در فایل App.vue “Root Component” in the App.vue File

  • ایجاد کامپوننت Creating a Component

  • استفاده از کامپوننت ها Using Components

  • حرکت به یک ساختار پوشه بهتر Moving to a Better Folder Structure

  • نحوه نامگذاری برچسب های مؤلفه (انتخاب کنندگان) How to Name Your Component Tags (Selectors)

  • Scoping Component Styles Scoping Component Styles

  • بسته بندی ماژول Module Wrap Up

برقراری ارتباط بین مؤلفه ها [VUE2] Communicating Between Components [VUE2]

  • معرفی ماژول Module Introduction

  • مشکلات ارتباطی Communication Problems

  • استفاده از Props for Parent => Child Communication Using Props for Parent => Child Communication

  • نامگذاری "پروپاس". Naming “props”

  • استفاده از «Props» در مؤلفه کودک Using “Props” in the Child Component

  • اعتبار سنجی “Props†Validating “Props”

  • استفاده از رویدادهای سفارشی برای کودک => ارتباط والدین Using Custom Events for Child => Parent Communication

  • درک جریان داده های یک طرفه Understanding Unidirectional Data Flow

  • برقراری ارتباط با توابع پاسخ به تماس Communicating with Callback Functions

  • ارتباط بین اجزای خواهر و برادر Communication between Sibling Components

  • استفاده از اتوبوس رویداد برای ارتباط Using an Event Bus for Communication

  • متمرکز کردن کد در گذرگاه رویداد Centralizing Code in an Event Bus

  • بسته شدن Wrap Up

استفاده از مؤلفه پیشرفته [VUE2] Advanced Component Usage [VUE2]

  • معرفی ماژول Module Introduction

  • راه اندازی پروژه ماژول Setting Up the Module Project

  • محتوای عبور - راه حل کمتر از حد مطلوب Passing Content - The Suboptimal Solution

  • ارسال محتوا با اسلات Passing Content with Slots

  • محتوای اسلات چگونه کامپایل و سبک می شود؟ How Slot Content Gets Compiled and Styled?

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

  • اسلات های پیش فرض Default Slots

  • خلاصه ای از اسلات ها A Summary on Slots

  • تعویض چندین کامپوننت با کامپوننت های پویا Switching Multiple Components with Dynamic Components

  • درک رفتار مؤلفه های پویا Understanding Dynamic Component Behavior

  • زنده نگه داشتن اجزای پویا Keeping Dynamic Components Alive

  • قلاب چرخه حیات کامپوننت پویا Dynamic Component Lifecycle Hooks

  • بسته شدن Wrap Up

پروژه دوره دوم - نقل قول های شگفت انگیز [VUE2] Second Course Project - Wonderful Quotes [VUE2]

  • معرفی ماژول Module Introduction

  • راه اندازی پروژه Setting Up the Project

  • راه اندازی برنامه Initializing the Application

  • ایجاد اجزای برنامه Creating the Application Components

  • انتقال داده با Props و Slots Passing Data with Props and Slots

  • اجازه دادن به کاربران برای ایجاد نقل قول با یک جزء NewQuote Allowing Users to Create Quotes with a NewQuote Component

  • اضافه کردن نقل قول با رویدادهای سفارشی Adding Quotes with Custom Events

  • افزودن جعبه اطلاعات Adding an Info Box

  • امکان حذف نقل قول Allowing for Quote Deletion

  • کنترل نقل قول ها با نوار پیشرفت Controlling Quotes with a Progress Bar

  • کارهای پایانی و مدیریت دولتی Finishing Touches and State Management

مدیریت ورودی کاربر با فرم‌ها [VUE2] Handling User Input with Forms [VUE2]

  • معرفی ماژول Module Introduction

  • یک فرم پایه <ورودی> صحافی A Basic <input> Form Binding

  • گروه‌بندی داده‌ها و پر کردن ورودی‌ها Grouping Data and Pre-Populating Inputs

  • تغییر ورودی کاربر با اصلاح کننده های ورودی Modifying User Input with Input Modifiers

  • اتصال <textarea> و مدیریت ورودی کاربر Binding <textarea> and Handling User Input

  • استفاده از چک باکس ها و ذخیره داده ها در آرایه ها Using Checkboxes and Saving Data in Arrays

  • با استفاده از دکمه های رادیویی Using Radio Buttons

  • مدیریت بازشوها با <select> و <option> Handling Dropdowns with <select> and <option>

  • V-Model چه کاری انجام می دهد و چگونه یک کنترل سفارشی ایجاد کنیم What V-Model Does and How to Create a Custom Control

  • ایجاد یک کنترل سفارشی (ورودی) Creating a Custom Control (Input)

  • ارسال فرم Submitting a Form

  • بسته شدن Wrap Up

استفاده و ایجاد دستورالعمل ها [VUE2] Using and Creating Directives [VUE2]

  • معرفی ماژول Module Introduction

  • درک دستورالعمل ها Understanding Directives

  • دستورالعمل ها چگونه کار می کنند؟ توابع قلاب How Directives Work? Hook Functions

  • ایجاد یک دستورالعمل ساده Creating a Simple Directive

  • انتقال ارزش ها به دستورالعمل های سفارشی Passing Values to Custom Directives

  • انتقال استدلال به دستورالعمل های سفارشی Passing Arguments to Custom Directives

  • اصلاح یک دستورالعمل سفارشی با اصلاح کننده ها Modifying a Custom Directive with Modifiers

  • دستورالعمل های سفارشی - خلاصه Custom Directives - A Summary

  • ثبت دستورالعمل ها به صورت محلی Registering Directives Locally

  • استفاده از چند اصلاح کننده Using Multiple Modifiers

  • انتقال ارزش های پیچیده تر به دستورالعمل ها Passing More Complex Values to Directives

  • بسته شدن Wrap Up

بهبود برنامه شما با فیلترها و ترکیبات [VUE2] Improving your App with Filters and Mixins [VUE2]

  • معرفی ماژول Module Introduction

  • ایجاد یک فیلتر محلی Creating a Local Filter

  • فیلترهای جهانی چیست و چگونه چندین فیلتر را زنجیر کنیم؟ What are Global Filters and How to Chain Multiple Filters?

  • یک جایگزین (اغلب بهتر) برای فیلترها: خصوصیات محاسبه شده An (Often Better) Alternative to Filters: Computed Properties

  • درک ترکیبات Understanding Mixins

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

  • چگونه مخلوط ها ادغام می شوند How Mixins Get Merged

  • ایجاد یک میکس جهانی (مورد خاص!) Creating a Global Mixin (Special Case!)

  • ترکیبات و دامنه Mixins and Scope

  • بسته شدن Wrap Up

افزودن انیمیشن‌ها و انتقال‌ها [VUE2] Adding Animations and Transitions [VUE2]

  • معرفی ماژول Module Introduction

  • درک انتقال Understanding Transitions

  • تهیه کد برای استفاده از انتقال Preparing a Code to Use Transitions

  • راه اندازی یک انتقال Setting Up a Transition

  • اختصاص کلاس های CSS برای انتقال Assigning CSS Classes for Transitions

  • ایجاد یک انتقال “Fadeâ € با ویژگی CSS Transition Creating a “Fade” Transition with the CSS Transition Property

  • ایجاد یک انتقال "اسلاید" با ویژگی انیمیشن CSS Creating a “Slide” Transition with the CSS Animation Property

  • ترکیب ویژگی های انتقال و انیمیشن Mixing Transition and Animation Properties

  • انیمیشن V-If و V-Show Animating V-If and V-Show

  • تنظیم یک انیمیشن اولیه (در بارگذاری). Setting Up an Initial (On-Load) Animation

  • استفاده از نام های مختلف کلاس CSS Using Different CSS Class Names

  • استفاده از نام ها و ویژگی های پویا Using Dynamic Names and Attributes

  • انتقال بین عناصر چندگانه (نظریه) Transitioning between Multiple Elements (Theory)

  • انتقال بین عناصر چندگانه (تمرین) Transitioning between Multiple Elements (Practice)

  • گوش دادن به Transition Event Hooks Listening to Transition Event Hooks

  • آشنایی با انیمیشن های جاوا اسکریپت Understanding JavaScript Animations

  • حذف CSS از انیمیشن شما Excluding CSS from your Animation

  • ساخت انیمیشن در جاوا اسکریپت Creating an Animation in JavaScript

  • متحرک سازی اجزای پویا Animating Dynamic Components

  • متحرک سازی لیست ها با <transition-group> Animating Lists with <transition-group>

  • استفاده از <transition-group> - Preparations Using <transition-group> - Preparations

  • استفاده از <transition-group> برای متحرک کردن لیست Using <transition-group> to Animate a List

  • درک اپلیکیشن Understanding the App

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

  • اضافه کردن انیمیشن ها Adding Animations

  • بسته شدن Wrap Up

اتصال به سرورها از طریق HTTP - با استفاده از Vue-Resource [VUE2] Connecting to Servers through HTTP - Using Vue-Resource [VUE2]

  • معرفی ماژول Module Introduction

  • دسترسی به HTTP از طریق Vue-Resource – Setup Accessing HTTP through Vue-Resource – Setup

  • ایجاد اپلیکیشن و راه اندازی سرور (Firebase) Creating an Application and Setting Up a Server (Firebase)

  • ارسال اطلاعات به سرور (ارسال درخواست POST) POST Data to a Server (Sending a POST Request)

  • ارسال و تبدیل داده ها (ارسال یک درخواست GET) Sending and Transforming Data (Sending a GET Request)

  • پیکربندی Vue-Resource در سطح جهانی Configuring Vue-Resource Globally

  • رهگیری درخواست ها Intercepting Requests

  • رهگیری پاسخ ها Intercepting Responses

  • «منبع» در Vue-Resource از کجا می آید Where the “Resource” in Vue-Resource Comes From

  • ایجاد منابع سفارشی Creating Custom Resources

  • منابع در مقابل درخواست های HTTP â €œNormalâ € Resources Versus “Normal” HTTP Requests

  • آشنایی با URL های قالب Understanding Template URLs

  • بسته شدن Wrap Up

مسیریابی در یک برنامه Vue.js [VUE2] Routing in a Vue.js Application [VUE2]

  • معرفی ماژول Module Introduction

  • راه اندازی روتر Vue.js (روتر Vue) Setting Up the Vue.js Router (Vue-router)

  • راه اندازی و بارگیری مسیرها Setting Up and Loading Routes

  • درک حالت های مسیریابی (هش در مقابل سابقه) Understanding Routing Modes (Hash Versus History)

  • پیمایش با پیوندهای روتر Navigating with Router Links

  • سبک دادن به پیوندهای فعال Styling Active Links

  • پیمایش از یک کد (ناوبری ضروری) Navigating from a Code (Imperative Navigation)

  • تنظیم پارامترهای مسیر Setting Up Route Parameters

  • واکشی و استفاده از پارامترهای مسیر Fetching and Using Route Parameters

  • واکنش به تغییرات در پارامترهای مسیر Reacting to Changes in Route Parameters

  • تنظیم مسیرهای کودک (مسیرهای تودرتو) Setting Up Child Routes (Nested Routes)

  • پیمایش به مسیرهای تودرتو Navigating to Nested Routes

  • پویاتر کردن پیوندهای روتر Making Router Links More Dynamic

  • روشی بهتر برای ایجاد پیوندها - با مسیرهای نامگذاری شده A Better Way of Creating Links - With Named Routes

  • استفاده از پارامترهای پرس و جو Using Query Parameters

  • نماهای چندگانه روتر (نماهای روتر نامگذاری شده) Multiple Router Views (Named Router Views)

  • تغییر مسیر Redirecting

  • راه اندازی «Catch All» Routes/Waldcards Setting Up “Catch All” Routes/Wildcards

  • متحرک سازی انتقال مسیر Animating Route Transitions

  • عبور از هش فرگمنت Passing the Hash Fragment

  • کنترل رفتار اسکرول Controlling the Scroll Behavior

  • حفاظت از مسیرها با نگهبانان Protecting Routes with Guards

  • با استفاده از گارد “BeforeEnter†Using the “BeforeEnter” Guard

  • با استفاده از گارد «پیش از ترک». Using the “BeforeLeave” Guard

  • Loading Routes Lazily Loading Routes Lazily

  • بسته شدن Wrap Up

مدیریت بهتر حالت با Vuex [VUE2] Better State Management with Vuex [VUE2]

  • معرفی ماژول Module Introduction

  • چرا ممکن است به یک مدیریت دولتی متفاوت نیاز باشد؟ Why a Different State Management may Be Needed

  • درک "دولت متمرکز". Understanding “Centralized State”

  • استفاده از دولت متمرکز Using the Centralized State

  • چرا یک دولت متمرکز به تنهایی آن را حل نمی کند؟ Why a Centralized State Alone Won't Fix it

  • درک گترها Understanding Getters

  • استفاده از Getters Using Getters

  • Mapping Getters to Properties Mapping Getters to Properties

  • درک جهش Understanding Mutations

  • استفاده از جهش Using Mutations

  • چرا جهش ها باید به صورت همزمان اجرا شوند؟ Why Mutations Have to Run Synchronously

  • چگونه اقدامات جهش ها را بهبود می بخشد How Actions Improve Mutations

  • استفاده از Actions Using Actions

  • نگاشت اقدامات به روش ها Mapping Actions to Methods

  • خلاصه ای از Vuex A Summary of Vuex

  • دو طرفه صحافی (v-model) و Vuex Two-Way Binding (v-model) and Vuex

  • بهبود ساختار پوشه ها Improving Folder Structures

  • مدولار کردن مدیریت دولتی Modularizing the State Management

  • استفاده از فایل های جداگانه Using Separate Files

  • استفاده از فضاهای نام برای جلوگیری از مشکلات نامگذاری Using Namespaces to Avoid Naming Problems

  • بسته شدن Wrap Up

پروژه نهایی - معامله‌گر سهام [VUE2] Final Project - The Stock Trader [VUE2]

  • معرفی پروژه Project Introduction

  • راه اندازی و برنامه ریزی پروژه Project Setup and Planning

  • ایجاد اولین مؤلفه ها Creating the First Components

  • راه‌اندازی مسیرهای پروژه Set Up Project Routes

  • اضافه کردن هدر و ناوبری Adding a Header and Navigation

  • برنامه ریزی مراحل بعدی Planning the Next Steps

  • ایجاد اجزای سهام Creating Stocks Components

  • افزودن دکمه «خرید». Adding a “Buy” Button

  • راه اندازی مدیریت Vuex State Setting Up the Vuex State Management

  • اضافه کردن یک ماژول نمونه کارها به Vuex Adding a Portfolio Module to Vuex

  • کار بر روی سهام نمونه کارها Working on the Portfolio Stocks

  • اتصال پورتفولیو با Vuex Connecting the Portfolio with Vuex

  • زمان رفع برخی از خطاها است Time to fix some Errors

  • نمایش وجوه Displaying the Funds

  • افزودن برخی چک های سفارش Adding Some Order Checks

  • با فیلترها وجوه را زیباتر کنید Making Funds Look Nicer with Filters

  • پایان روز - تصادفی کردن سهام Ending the Day - Randomizing Stocks

  • متحرک سازی انتقال مسیر Animating the Route Transitions

  • ذخیره و واکشی داده ها - اضافه کردن یک کشویی Saving and Fetching Data - Adding a Dropdown

  • راه اندازی Vue-Resource و Firebase Setting Up Vue-Resource and Firebase

  • ذخیره داده (درخواست PUT) Saving Data (PUT Request)

  • واکشی داده ها (درخواست دریافت) Fetching Data (GET Request)

  • تست و رفع اشکال Testing and Bug Fixes

  • جمع بندی پروژه Project Wrap Up

  • امتیاز: اشکال زدایی Vuex با ابزارهای توسعه دهنده Vue Bonus: Debugging Vuex with Vue Developer Tools

استقرار یک برنامه Vue.js [VUE2] Deploying a Vue.js Application [VUE2]

  • معرفی ماژول Module Introduction

  • آماده شدن برای استقرار Preparing for Deployment

  • استقرار برنامه (مثال: AWS S3) Deploying the App (Example: AWS S3)

امتیاز: استفاده از Axios به جای Vue-Resource [VUE2] Bonus: Using Axios Instead of Vue-Resource [VUE2]

  • درباره این بخش About This Section

  • معرفی ماژول Module Introduction

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

  • راه اندازی Axios Axios Setup

  • ارسال درخواست POST Sending a POST Request

  • ارسال درخواست GET Sending a GET Request

  • دسترسی و استفاده از داده های پاسخ Accessing and Using Response Data

  • تنظیم یک پیکربندی درخواست جهانی Setting a Global Request Configuration

  • استفاده از رهگیرها Using Interceptors

  • نمونه های سفارشی Axios Custom Axios Instances

  • بسته شدن Wrap Up

امتیاز: احراز هویت در برنامه های Vue Bonus: Authentication in Vue Apps

  • بخش مقدمه Section Introduction

  • معرفی ماژول Module Introduction

  • چگونه احراز هویت در برنامه های تک صفحه ای (SPA) کار می کند How Authentication Works in Single-Page Applications (SPAs)

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

  • اضافه کردن ثبت نام کاربر Adding User Sign-Up

  • افزودن ورود کاربر (ورود به سیستم) Adding User Sign-In (Login)

  • استفاده از Vuex برای ارسال درخواست های احراز هویت Using Vuex to Send Auth Requests

  • ذخیره داده های Auth در Vuex Storing Auth Data in Vuex

  • دسترسی به منابع دیگر از Vuex Accessing Other Resources from Vuex

  • ارسال توکن به Backend Sending the Token to the Backend

  • مسیرهای حفاظتی (گارد مجوز) Protecting Routes (Auth Guard)

  • به روز رسانی حالت رابط کاربری (بر اساس وضعیت احراز هویت) Updating the UI State (Based on Authentication State)

  • افزودن خروج کاربر Adding User Logout

  • افزودن خروج خودکار Adding Auto Logout

  • افزودن ورود خودکار Adding Auto Login

  • بسته شدن Wrap Up

نمایش نظرات

Packtpub یک ناشر دیجیتالی کتاب‌ها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرم‌افزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتاب‌ها، ویدیوها و دوره‌های آموزشی می‌پردازد که به توسعه‌دهندگان و متخصصان فناوری اطلاعات کمک می‌کند تا مهارت‌های خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامه‌نویسی، توسعه وب، داده‌کاوی، امنیت سایبری و هوش مصنوعی را پوشش می‌دهد. محتوای این منابع به صورت کاربردی و به‌روز ارائه می‌شود تا کاربران بتوانند دانش و توانایی‌های لازم برای موفقیت در پروژه‌های عملی و حرفه‌ای خود را کسب کنند.

آموزش Vue - راهنمای کامل (شامل Vue Router، Vuex و Composition API) [ویدئو]
جزییات دوره
44 h 59 m
598
Packtpub Packtpub
(آخرین آپدیت)
4
4.3 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Maximilian Schwarzmüller Maximilian Schwarzmüller

دارای گواهینامه AWS، توسعه دهنده وب و مدرس حرفه ای