آموزش Vue.js — مجموعه مقالات مجله فرادرس
Vue یک فریمورک پیشرونده جاوا اسکریپت است که برای ساخت اینترفیسهای کاربری استفاده میشود. برخلاف فریمورکهای تکبعدی، Vue از ابتدا طوری ساخته شده است که در گذر زمان انطباقپذیری خود را حفظ کند. کتابخانه مرکزی آن صرفاً روی لایه View متمرکز شده است و استفاده از آن به همراه کتابخانههای دیگر یا در پروژههای موجود آسان است. از سوی دیگر Vue زمانی که به همراه ابزارهای مدرن و کتابخانههای پشتیبانش استفاده شود، به طور کامل امکان طراحی اپلیکیشنهای پیچیده تکصفحهای را نیز دارد. ما در مجله فرادرس در طی ماههای اخیر مجموعه مقالاتی را به آموزش Vue.js ، این فریمورک محبوب اختصاص دادیم.
مجموعه مقالات آموزش Vue.js
در ادامه عناوین آموزشهای Vue.js مجله فرادرس را به همراه توضیحی کوتاه مشاهده میکنید.
در این نخستین بخش از مجموعه مقالات آموزش Vue.js به ارائه توضیحاتی کلی در مورد این فریمورک پرداختیم، سپس دلایل محبوبیت آن را برشمردیم. در نهایت جایگاه آن را در بین فریمورکهای فرانتاند دیگر مورد بررسی قرار دادیم. در واقع Vue ایدههای زیادی از دو فریمورک عمده دیگر فرانتاند یعنی انگولار و ریاکت گرفته است و با رفع نواقص آنها تلاش کرده است تا یک فریمورک سبک و البته با کارایی بالا خلق کند که ساختاری «پیشرونده» (Progressive) داشته باشد.
در این بخش بهصورت عملی نخستین اپلیکیشن خود را با استفاده از Vue ایجاد میکنیم. در این مسیر با روش استفاده از Vue CLI آشنا میشویم. در ادامه با معایب و مزایای Vue CLI آشنا میشویم و در نهایت اپلیکیشن خود را اجرا میکنیم تا از عملکرد آن اطمینان حاصل کنیم.
در این بخش از سری مقالات آموزش جامع فریمورک Vue و در ادامه بخش قبلی با مراحل کدنویسی عملی اپلیکیشنهای Vue آشنا میشویم. بدین ترتیب به بررسی مفهوم ریپازیتوری گیت و پلاگینها میپردازیم. همچنین از Vue CLI برای ساخت پروتوتایپ سریع استفاده میکنیم. در این مقاله با مراحل نصب DevTools در مرورگرهای مختلف آشنا میشویم و مراحل ابتدایی کار با آن را مشاهده خواهیم کرد.
در این نوشته توضیحاتی در خصوص مراحل راهاندازی VS Code برای توسعه کد Vue ارائه میکنیم. ویژوال استودیو کد یا به اختصار VS Code یکی از پرکاربردترین ادیتورهای کد حال حاضر دنیا محسوب میشود. ادیتورهای کد نیز مانند اغلب نرمافزارهای دیگر یک چرخه عمر دارند. نکته جالبی که در مورد محبوبیت این ادیتور وجود دارد آن است که افراد مختلف با صرف زمان زیاد، برای هر چیزی که تصور بکنید افزونه ساختهاند. یکی از این افزونهها به نام Vetur ابزار جالبی است که به توسعهدهندگان Vue.js کمک میکند.
کامپوننتها واحدهای منفرد و مستقل یک اینترفیس هستند. کامپوننتها میتوانند State ،Markup و استایل داشته باشند. در این نوشته به بررسی کامپوننتهای Vue میپردازیم. ابتدا روشهای مختلف تعریف کامپوننت را مشاهده میکنیم. سپس با کامپوننتهای لوکال آشنا میشویم و کامپوننتهای تک فایلی را مورد بررسی قرار میدهیم. در نهایت با قالبهای Vue آشنا خواهیم شد.
در این بخش از مجموعه مقالات آموزش Vue، تکنیک دیگری به نام دایرکتیوها را بررسی میکنیم که از سوی Vue.js در قالبها عرضه شده است. دایرکتیوها اساساً همانند خصوصیتهای HTML هستند که درون قالبها اضافه میشوند. همه آنها با v- آغاز میشوند تا مشخص شود که خصوصیتهای ویژه Vue هستند. در ادامه این مقاله به بررسی تفصیلی هر کدام از دایرکتیوهای Vue پرداختهایم.
در این بخش از سری مقالات آموزش Vue.js به بررسی متدهای ویو پرداختهایم. منظور از متد در Vue تابعی مرتبط با یک وهله از Vue است. متدها در Vue درون مشخصه methods تعریف میشوند. در این مقاله ابتدا با روش ارسال پارامترها به متدهای Vue.js آشنا میشویم. سپس با شیوه دسترسی به دادههای متد آشنا خواهیم شد. در ادامه مشخصههای محاسبه شده توضیح داده شدهاند.
در این بخش از سری مقالات آموزش Vue به بررسی مبحث رویدادها در Vue میپردازیم. Vue.js امکان تفسیر رویداد DOM را با استفاده از دایرکتیو v-on روی یک عنصر فراهم کرده است. همچنین فیلترها، اسلاتها و انواعشان شامل اسلاتهای با نام و اسلاتهای با دامنه توضیح داده شدهاند. در نهایت روش اتصال فیلترها به همدیگر مورد بررسی قرار گرفته است.
روشهای مختلفی برای برقراری ارتباط بین کامپوننتهای Vue وجود دارد. در این مقاله به توضیح این روشهای مختلف خواهیم پرداخت. همچنین روش برقراری ارتباط را از طریق کتابخانه مدیریت حالت با Vuex توضیح میدهیم. این روشها شامل ارتباط با استفاده از props، استفاده از رویدادها برای ارتباط از سمت فرزندان به والدین و استفاده از Event Bus برای ارتباط بین کامپوننتها است. در نهایت مدیریت حالت با Vuex توضیح داده شده است.
در بخش پایانی مجموعه مقالات آموزش Vue.js به توضیح مفهوم مسیر در این فریمورک پرداختیم. در وباپلیکیشنهای جاوا اسکریپت منظور از مسیر بخشی است که نمای نمایش یافته کنونی را با محتوای نوار آدرس مرورگر همگامسازی میکند. به بیان دیگر بخشی است که تغییرات URL را در زمان کلیک کردن روی چیزی در صفحه بر عهده دارد و به نمایش نمای مناسب در زمان کلیک روی یک URL خاص کمک میکند. در این مقاله به توضیح روش مدیریت URL با Vue Router پرداختهایم.
سخن پایانی
Vue یک فریمورک اوپنسورس جاوا اسکریپت به صورت Model–View–Viewmodel است که برای ساخت اینترفیسهای کاربری و اپلیکیشنهای تکصفحهای استفاده میشود. این فریمورک از سوی Evan You ایجاد شده و از سوی خود وی و بقیه اعضای تیم مرکزی که از شرکتهای مختلفی گرد هم آمدهاند نگهداری میشود.
مهمترین خصوصیت Vue این است که یک معماری انطباق پذیر در طی زمان ساخته است که بر روی رندرینگ اعلانی و ترکیببندی کامپوننت تمرکز دارد. قابلیتهای پیشرفته مورد نیاز برای اپلیکیشنهای پیچیده مانند مسیریابی، مدیریت حالت و ابزارهای build از طریق کتابخانههای پشتیبانی و پکیجها عرضه میشوند.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای برنامهنویسی JavaScript (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- آموزش JavaScript ES6 (جاوا اسکریپت)
- آموزش Vue.js: دایرکتیوها در Vue — بخش ششم
- آموزش Vue.js: آشنایی با کامپوننت های Vue — بخش پنجم
==