Vue 3 را گام به گام یاد بگیرید
Learn Vue 3: Step by Step
I've been teaching Vue for years now. In fact, way back in 2015, as part of the first ever Vue series at Laracasts, I boldly predicted that Vue was about to skyrocket in popularity. That prediction turned out to be spot on. To be fair, though, it was an easy one. You need only spend ten minutes with the framework to understand why so many swear by it.
Whether you're brand new to Vue, coming over from a different framework, or simply want a refresher on the fundamentals, this new Vue 3 series is for you! We start at the beginning, and work our way up one step at a time.
قسمتهای دوره
Getting Started (3)
مبانی مطلق Vue 3
7m 3sStart your Vue 3 journey by learning initialization, text interpolation, and reactivity using a CDN in this friendly, beginner-focused Laracasts lesson!
اتصال ویژگی و مدیریت رویداد
8m 43sLearn how to bind HTML attributes with Vue's v-bind and get introduced to event handling in this clear, hands-on Laracasts lesson for dynamic apps!
لیستها، شرطها و ویژگیهای محاسبهشده
14mMaster Vue basics by learning to loop lists, use conditionals, and create computed properties with an assignment list example in this engaging Laracasts episode!
Vue Components (4)
اولین کامپوننت سفارشی Vue شما
8m 21sStart building real Vue apps by creating your first custom component. Learn the basics to craft dynamic, reusable UI in this friendly Laracasts lesson!
یک کامپوننت Vue در هر فایل
4m 8sKeep your Vue apps clean and organized by learning how to store each component in its own file in this practical, easy-to-follow Laracasts episode!
Props کامپوننت
8m 23sLearn how to use Vue props to pass data into components, making them flexible and configurable for dynamic, reusable UI in this friendly Laracasts lesson!
همه را کنار هم بیاورید
15m 45sRevisit assignment lists with fresh Vue insights and learn how to build cleaner, smarter components in this engaging Laracasts episode.
Event Handling (2)
مدیریت ارسال یک فرم
9m 3sMaster handling form submissions and events to let users create new assignments instantly in this hands-on, easy-to-follow Laracasts episode!
ارتباط وضعیت والد-فرزند
6m 48sLearn how to manage state communication between parent and child Vue components effectively, keeping your app reactive and organized in this clear Laracasts lesson!
Beyond the Basics (6)
همه چیز خیلی آسان است
11m 10sDiscover how mastering Vue basics speeds up your development. See quick examples that turn complex tasks into easy, efficient workflows in seconds!
مسئولیت کامپوننت
8m 7sLearn how to define clear component responsibility by refactoring with AssignmentsTags. Keep your Vue components focused, organized, and maintainable!
نگاهی عمیقتر به V-Model
8m 25sDive deeper into Vue's v-model directive. Understand how it works on inputs and custom components to build seamless, reactive forms with ease!
هوکهای چرخه حیات، APIهای جعلی و AJAX
8m 21sLearn how to use Vue lifecycle hooks with fetch() to load data from fake APIs. Build realistic, dynamic apps by fetching data instead of hard-coding it!
کامپوننتهای انعطافپذیرتر با اسلاتها و پرچمها
10m 47sBoost your Vue components' flexibility using slots and flags. Learn simple techniques to create configurable, reusable components with ease and clarity!
اسلاتهای نامدار
11m 27sLearn how to use named slots in Vue to insert content into multiple areas of a component. Enhance your layouts with flexible, organized component design!
Vite (2)
Ready to build Vue SPAs? Learn how to use Vite, a fast, first-party tool, to streamline your development and boost your app’s performance with ease!
چیزهای کوچک گیجکننده
10m 54sTackle common confusions as you build Vue apps with routing and config. Clarify tricky concepts and boost your confidence in this friendly, clear lesson!
The Composition API (4)
دو جهش ذهنی برای Script Setup
15m 37sDiscover two key mindset shifts to master Vue's Composition API and script setup. Embrace new patterns and level up your Vue skills with confidence!
از Mixinها به Composableها
11m 13sExplore code re-use by comparing traditional mixins with modern composables. Learn best practices for cleaner, reusable code in this friendly Laracasts episode!
مثال Composable: ذخیرهسازی محلی
17m 32sLearn how to create a Vue composable that uses localStorage and reactivity to remember form input values—even after refreshing the page—for seamless user experience.
بازنویسی به defineProps و defineEmits
16m 33sMaster Vue’s Composition API by refactoring with defineProps and defineEmits using script setup, featuring an enhanced tabbable textarea example.
Managing State (4)
تزریق وابستگی با Provide و Inject
9m 30sExplore dependency injection in Vue, learn to avoid prop drilling, and discover how provide/inject simplifies passing data across your app’s components.
ذخیره وضعیت در یک فایل خارجی
7m 3sLearn how to share state across components by storing it in a reusable external file. Simplify your app’s data flow with this easy, effective technique.
نگرانیهای تغییر مستقیم
6m 17sExplore key concepts and risks of directly mutating state before diving into Pinia. Learn best practices for safer, more predictable global state management.
به Pinia سلام کنید
8m 55sDiscover Pinia for global state management in Vue. Enjoy better devtools, hot reloading, and time-travel debugging to boost your app development workflow.
Team Dashboard Exercise (2)
سازماندهی کد
15m 56sBuild a SaaS team dashboard by organizing your layout into Vue components. Follow along as we design and structure a real-world app step-by-step.
ساخت و پر کردن یک فروشگاه تیمی
12m 10sCreate a dedicated Pinia team store and learn how to seed it with asynchronously fetched initial data for predictable state management.
Transitions, Teleports, Tips (3)
یک کامپوننت مودال بسازید
13mQuickly build a reusable Vue modal component, create, toggle, and integrate a clean, accessible modal into your app with minimal fuss.
دو روش برای ترنزیشن
10m 3sAdd polished show/hide animations to your modal with two Vue Transition approaches and learn practical techniques for smoother, accessible UI.
Learn Vue Teleport to place modals at the bottom of the page, creating cleaner, accessible modals rendered before the closing body tag.




