لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
Vue 3 in Action: 6 پروژه برای تسلط بر چارچوب
Vue 3 in Action: 6 Projects to Master the Framework
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
Master Vue 3 با پروژه های عملی، آموزش های گام به گام و برنامه های کاربردی دنیای واقعی برای توسعه دهندگان در همه سطوح. Master Vue 3 با Composition API و TypeScript ساخت 6 پروژه در دنیای واقعی از ابتدا ایجاد اجزای قابل استفاده مجدد و مقیاس پذیر پیاده سازی مدیریت حالت قوی با Pinia توسعه برنامه های کاربردی تک صفحه ای پویا با استفاده از Vue Router یادگیری ایجاد و استفاده از ترکیب های سفارشی برای استفاده مجدد از کد. اعمال بهترین روش های Vue. و الگوهای طراحی کسب تجربه عملی با توسعه Vue مدرن پیش نیازها:آشنایی با مبانی جاوا اسکریپت درک اولیه ساختار HTML دانش کاری سبک CSS
در این دوره جامع و بهروز Vue 3، شش پروژه (بهعلاوه یک پروژه به عنوان تمرین) ایجاد میکنید تا بر تمام موارد ضروری چارچوب Vue تسلط داشته باشید و به شما امکان میدهد پروژههای خود را بسازید یا شغلی را ایمن کنید. .
پوشش خواهیم داد:
- الگوها و دستورالعملهای Vue
- اجزاء، از جمله وسایل، رویدادها، و اسلات
- انتقالات
- TypeScript
- Composition API، از جمله ساخت اجزای سازنده خودتان
- روتر Vue (برای ساخت SPA)
- Pinia (مدیریت دولتی مشترک)
پروژه هایی که خواهید ساخت:
1. آیا می توانید رانندگی کنید؟
2. آزمون ساده (پروژه تمرین)
3. گالری تصاویر
4. لیست وظایف
5. مینی برنامه ثبت رویداد
6. برنامه تنظیمات کاربر
7. برنامه کتاب دستور غذا
به این دوره بپیوندید تا تجربه عملی را با Vue 3 به دست آورید، از Vite برای راه اندازی پروژه استفاده کنید و به کاربردهای عملی Vue's Composition API و Pinia برای مدیریت حالت بپردازید. بیاموزید که چگونه با Vue Router برنامههای تک صفحهای پویا (SPA) ایجاد کنید، برنامههای خود را با انتقال صاف تقویت کنید و از TypeScript برای کدهای ایمن تایپ استفاده کنید. چه مبتدی باشید و چه به دنبال ارتقاء مهارت های خود باشید، این دوره شما را به دانشی برای موفقیت در دنیای توسعه وب مدرن مجهز می کند.
در طول دوره، پروژههای دنیای واقعی میسازید که قدرت Vue 3 را به نمایش میگذارد، از ایجاد یک برنامه آزمون ساده تا مدیریت وضعیت با Pinia در برنامه تنظیمات کاربر. در پایان این دوره، درک کاملی از نحوه استفاده از Composition API Vue 3 برای ساخت برنامههای مقیاسپذیر و قابل نگهداری خواهید داشت. همچنین بهترین روشها را برای ساختاربندی برنامههای Vue و کارکرد مؤثر با TypeScript برای تشخیص زودهنگام خطاها و بهبود گردش کار توسعه خود یاد خواهید گرفت.
این دوره به گونه ای طراحی شده است که عملی و مبتنی بر پروژه باشد و به شما اطمینان دهد که نه تنها تئوری را یاد می گیرید بلکه دانش خود را در ساخت برنامه های کاربردی کاربردی نیز به کار می گیرید. چه بخواهید وارد صنعت شوید یا مهارت های موجود خود را افزایش دهید، این دوره آموزشی Vue 3 دروازه شما برای تبدیل شدن به یک توسعه دهنده ماهر Vue است.
سرفصل ها و درس ها
معرفی دوره
Course Introduction
Vue.js چیست و چرا باید آن را بیاموزید؟
What is Vue.js and Why You Should Learn It?
The Essence of Vue.js - Vue.js چگونه در 3 دقیقه کار می کند
The Essence of Vue.js - How Vue.js Works in 3 Minutes
نمای کلی دوره: آنچه یاد خواهید گرفت و پروژه هایی که خواهید ساخت
Course Overview: What You'll Learn and the Projects You'll Build
چرا Vue 3 را انتخاب کنید: مزایا و مزایا
Why Choose Vue 3: Benefits and Advantages
به حداکثر رساندن یادگیری خود: چگونه از این دوره بهترین استفاده را ببرید
Maximizing Your Learning: How to Make the Most Out of This Course
دسترسی به کد منبع: کجا آن را پیدا کنیم
Accessing the Source Code: Where to Find It
راه اندازی VSCode: میانبرها، برنامه های افزودنی و نکات ضروری
VSCode Setup: Essential Shortcuts, Extensions, and Tips
به یک یادآوری در HTML، جاوا اسکریپت یا CSS نیاز دارید؟ در اینجا مقداری کمک وجود دارد
Need a Reminder on HTML, JavaScript, or CSS? Here's Some Help
به Discord بپیوندید!
Join Discord!
اولین پروژه کوچک - آیا می توانید رانندگی کنید؟
1st Mini Project - Can you Drive?
مقدمه: پروژه 1
Intro: Project 1
زنده کردن برنامه Vue!
Making the Vue App Alive!
واکنش پذیری در Vue - با استفاده از ref()
Reactivity in Vue - Using ref()
ویژگی های محاسبه شده - با استفاده از ()
Computed Properties - Using computed()
کلاس های CSS شرطی
Conditional CSS Classes
اتصالات ورودی
Input Bindings
تمرین 1 - یک بازی امتحانی ساده بسازید
Exercise 1 - Build a Simple Quiz Game
تمرین 1 - راه حل
Exercise 1 - Solution
2nd Mini Project - گالری تصاویر با موارد دلخواه
2nd Mini Project - Image Gallery with Favorites
معرفی: دومین پروژه کوچک
Intro: 2nd Mini Project
مدیریت رویداد (v-on)
Event Handling (v-on)
اصلاح کننده های مدیریت رویداد
Event Handling Modifiers
رندر شرطی (v-if)
Conditional Rendering (v-if)
فهرستهای رندر (v-for)
Rendering Lists (v-for)
صفت Binding
Attribute Binding
تمرین 2 - تغییر حالت دلخواه/حذف تصویر
Exercise 2 - Favorite Toggling/Image Removing
تمرین 2 - راه حل برای کار 1
Exercise 2 - Solution to Task 1
تمرین 2 - راه حل برای کار 2
Exercise 2 - Solution to Task 2
سومین پروژه کوچک - مدیر وظیفه
3rd Mini Project - Task Manager
معرفی: سومین پروژه کوچک
Intro: 3rd Mini Project
قلاب چرخه حیات
Lifecycle Hooks
Refs الگو (دسترسی به عناصر DOM)
Template Refs (Accessing DOM Elements)
نمایش لیست وظایف
Displaying Task List
اضافه کردن وظایف جدید
Adding New Tasks
ناظران و عوارض جانبی
Watchers and Side Effects
مقایسه ساعت با ساعت افکت
Comparing watch with watchEffect
استخراج EventList: مدیریت خطا و بازیابی خطا
Extracting EventList: Error Handling and Error Recovery
طراحی واکنشگرا
Responsive Design
مؤلفه ها و نمادهای پویا
Dynamic Components & Icons
پروژه متوسط چهارم (قابلیت ترکیب و وضعیت اشتراک)
4th Medium Project (Composables & Sharing State)
مقدمه: Composables و State Sharing
Intro: Composables and State Sharing
ایجاد و استفاده از Composables
Creating and Using Composables
استفاده از رویدادهای قابل ترکیب و حذف
Using Composable and Eliminating Events
جزء BookingList
The BookingList Component
مولفه و تمرین 6 رسیدگی به خطا
Error Handling Component & Exercise 6
راه حل تمرین 6
Exercise 6 Solution
پروژه متوسط پنجم (TypeScript، Transitions، Tabs)
5th Medium Project (TypeScript, Transitions, Tabs)
مقدمه: معرفی پروژه متوسط پنجم
Intro: 5th Medium Project Introduction
یک پروژه Vue TypeScript ایجاد کنید و Tailwind را اضافه کنید
Create a Vue TypeScript Project & Add Tailwind
Props و Events را با TypeScript تعریف کنید
Define Props and Events with TypeScript Types
محدود کردن انواع refs و سایر داده ها
Narrowing Down the Types of refs and Other Data
تب های رندر - چگونه حالت فعال برگه را نمایش دهیم؟
Rendering Tabs - How to Display the Tab Active State?
رندر کردن محتوای برگه با استفاده از اجزای پویا
Rendering Tab Content using Dynamic Components
Transitions - نحوه اضافه کردن CSS Transitions به محتوای Tab
Transitions - How to Add CSS Transitions on Tab Content
مولفه های انتقال سفارشی - چگونه از انتقال ها استفاده مجدد کنیم؟
Custom Transition Components - How to Reuse Transitions?
پنجمین پروژه متوسط (TypeScript، Teleport، KeepAlive، وضعیت مشترک)
5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)
مقدمه: پنجمین ایستگاه بازرسی پروژه متوسط شماره 2
Intro: 5th Medium Project Checkpoint #2
فرم عمومی نشانه گذاری و انتقال گوچا
General Form Markup & Transition Gotcha
تابع واکنشی با ref در Vue 3 چه تفاوتی دارد؟
How is the reactive Function Different from ref in Vue 3?
کامپوننت KeepAlive - چگونه وضعیت اجزای پویا را از دست ندهیم؟
KeepAlive Component - How to Not Lose the State of Dynamic Components?
ایجاد فرمهای حریم خصوصی و اعلانها: افزودن نشانهگذاری و حفظ دادههای کاربر
Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data
همگام سازی فضای ذخیره سازی محلی: نحوه ذخیره و بازیابی تنظیمات
Syncing Local Storage: How to Store and Retrieve Settings
ایمنی TypeScript: Generics و Keyof - ایمنی نوع ذهنی!
TypeScript Safety: Generics and Keyof - Mindblowing Type Safety!
ساخت یک سیستم اعلان با استفاده از Toast Component
Building a Notification System using Toast Component
ایجاد useNotifications Composable
Creating a useNotifications Composable
مؤلفه Teleport - نحوه انتقال نشانه گذاری به عنصر دیگر (به عنوان مثال بدنه)
Teleport Component - How to Move Markup to Another Element (e.g. body)
ششمین پروژه متوسط (روتر Vue)
6th Medium Project (Vue Router)
معرفی: پروژه ششم
Intro: 6th Project
ایجاد پروژه کتاب دستور غذا
Creating the Recipe Book Project
آشنایی با روتر Vue و پیکربندی آن
Understanding Vue Router and it's Config
نماهای مسیر چگونه رندر می شوند و چگونه لینک ها را اضافه کنیم؟
How Route Views are Rendered and How to Add Links?
اضافه کردن Routes، RouterLink در مقابل یک عنصر و استفاده از Route Name
Adding Routes, RouterLink vs A Element and Using Route Name
مسیرهای پویا - چگونه آنها را تعریف کرده و پارامترها را در کامپوننت بخوانید؟
Dynamic Routes - How to Define Them and Read Parameters in the Component?
پیوند دادن به مسیرهای پویا با Params
Linking to Dynamic Routes with Params
نمایش نظرات