اپیزود ۳ : مرور Vue 3 و ساخت و مشاهده اولین کامپوننت با Inertia.js در لاراول ۱۱

در این اپیزود از آموزش جامع فول استک لاراول، به مرور مختصری از Vue 3 می پردازیم و سپس با قدرت از Inertia.js، اولین کامپوننت Vue خود را برای پروژه لاراول 11 خواهیم ساخت. در قسمت چهارم از دوره آموزش فول استک لاراول، به مرور ویژگی‌های Vue 3 و تفاوت‌های آن با Vue 2 می‌پردازیم. در این اپیزود، نحوه ساخت یک route ساده در لاراول را نشان می‌دهیم و سپس با استفاده از Inertia.js و Vue یک صفحه HelloWorld ایجاد می‌کنیم. همچنین به تفاوت بین دو سبک API (Options API و Composition API) در Vue می‌پردازیم و با نحوه استفاده از آن‌ها در پروژه‌های لاراول آشنا می‌شویم. به علاوه، نحوه کار با state و directive ها در Vue را بررسی می‌کنیم و نشان می‌دهیم چگونه می‌توان از کامپوننت‌های Vue برای بهبود ساختار و کارایی کدهای خود استفاده کرد. موارد کلیدی که در این ویدیو به آنها پرداخته می شود: - مروری بر ویژگی های برجسته Vue 3: با جدیدترین نسخه این فریم ورک جاوا اسکریپتی محبوب آشنا خواهید شد و قدرت و انعطاف پذیری آن را در ساخت رابط های کاربری پویا و تعاملی درک خواهید کرد. - ساخت Route برای نمایش Vue در Inertia.js: یاد می گیرید که چگونه Inertia.js را برای نمایش کامپوننت های Vue در صفحات وب خود پیکربندی کنید و به زیبایی آنها را در پروژه لاراول خود ادغام نمایید. - آشنایی با ساختار فایل های Vue: با ساختار استاندارد فایل های Vue آشنا خواهید شد و نحوه سازماندهی و نوشتن کدهای Vue را به صورت اصولی فرا خواهید گرفت. - معرفی Options API و Composition API در Vue: دو روش اصلی برای نوشتن منطق کامپوننت های Vue را خواهید شناخت و با مزایا و معایب هر یک آشنا خواهید شد. کار با data و methods در Vue: نحوه مدیریت داده ها و روش های مختلف برای تغییر و به روز رسانی آنها در کامپوننت های Vue را فرا خواهید گرفت. - استفاده از دایرکتیوهای Vue مانند v-if، v-bind و v-html: با دایرکتیوهای قدرتمند Vue آشنا خواهید شد و نحوه استفاده از آنها برای کنترل جریان برنامه، نمایش داده ها و دستکاری DOM را یاد خواهید گرفت. - ساخت کامپوننت های Vue و استفاده از آنها در Inertia.js: مهارت ساخت کامپوننت های Vue را ارتقا خواهید داد و نحوه استفاده از آنها را در پروژه های Inertia.js برای ایجاد رابط های کاربری قابل استفاده مجدد فرا خواهید گرفت. - ارسال props به کامپوننت ها: یاد می گیرید که چگونه داده ها را از کامپوننت های والد به کامپوننت های فرزند ارسال کنید و از آنها برای شخصی سازی و پویایی بخشیدن به رابط کاربری خود استفاده نمایید. - استفاده از slot ها در Vue: با مفهوم slot ها در Vue آشنا خواهید شد و نحوه استفاده از آنها برای ایجاد رابط های کاربری انعطاف پذیر و قابل تنظیم را فرا خواهید گرفت. لینک های مفید: مخزن گیت هاب پروژه: https://github.com/kemalyen/laravel11-boilerplate برنچ این اپیزود : https://github.com/unknownman/laravel-boilerplate-11/tree/03_Vue_Overview مستندات Vue 3: https://vuejs.org/guide/introduction.html مستندات Inertia.js: https://inertiajs.com/