آموزش ساخت یک واسط کاربری UI با ویو جی اس Vue.js یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی آموزشی کار با Vue.js و ساخت یک User Interface است که با نام اصلی Vue.js Building an Interface از شرکت Pluralsight منتشر شده است.

Vue.js چیست؟

برنامه نویسان وب اغلب به دنبال انتخاب مناسب ترین تکنولوژی برای پروژه های مختلف خود هستند. یکی از موضوعاتی که برنامه نویسان همواره به آن توجه دارند انتخاب یک تکنولوژی مناسب، برای تولید بهترین نرم افزار و سازماندهی کد به بهترین شکل ممکن است. امروزه فریم ورک ها و کتابخانه های مختلفی برای توسعه وب اپلیکیشن ها در سمت کلاینت معرفی شده اند که بسیاری از آنها بر اساس جاوا اسکریپت کار می کنند. فریم ورک Vue.js به صورت open source و بر اساس جاوا اسکریپت بنا نهاده شده است هدف اصلی Vue.js کمک به برنامه نویسان وب به منظور ساخت UI های برنامه های تک صفحه ای (SPA) و یا single-page application ها می باشد. فریم ورک Vue.js اصطلاحاً progressive می باشد که اجازه می دهد شما بتوانید با سرعت بسیار زیادی application های تک صفحه ای خود را ایجاد کرده و آنها را در قالب کامپوننت های مختلف پیاده سازی کنید. از ویژگی های بسیار جذاب Vue.js قابلیت reactive بودن یا همان واکنش گر بودن آن می باشد که از موضوعاتی از قبیل data binding ها برای انجام چنین کارهایی استفاده می کند. یکی دیگر از اهداف بسیار مهم در فریم ورک Vue.js تفکیک کردن و یا اصطلاحا decouple کردن قسمت های مختلف برنامه از یکدیگر است، تا برنامه نویس بتواند با سرعت بسیار بالایی واسط کاربری و یا user interface برنامه را تشکیل دهد.

اساس کار فریم ورک Vue.js برمبنای کامپوننت ها و شکستن برنامه به قسمت های کوچک تر می باشد. البته دیگر فریم ورک ها و کتابخانه هایی که شبیه به Vue.js عمل می کنند نیز بر اساس همین مفهوم کار می‌کند. برای مثال می توان از React و Angular در این رابطه نام برده در رابطه با این دو ابزار نیز توصیه میکنیم از آموزش شروع به کار با ری اکت جی اس React.js و آموزش شروع به کار با Angular 2 دیدن کنید. تفاوت اصلی Vue.js با این نوع از فریم ورک ها و کتابخانه‌ ها تاکید زیاد آن بر روی decouple کردن و یا جدا کردن قسمت های مختلف برنامه می باشد. این موضوع به برنامه نویس اجازه می دهد تا بتواند با سرعت بسیار بالاتری به توسعه اپلیکیشن user interface آن بپردازد. همچنین برنامه‌ نویس می‌تواند قابلیت‌های جدید برنامه را پیاده سازی کرده و در قابل قسمت های جداگانه به برنامه اضافه کند. برای مثال، اگر می خواهید یک قابلیت جدید را به برنامه اضافه کنید به سادگی می توان آن را در قالب یک کامپوننت جدید به برنامه اضافه کرد یک برنامه به اضافه شدن کامپوننت های جدید مرتباً رشد می‌کند و قابلیت‌های جدید خود را تشکیل می‌دهد. کامپوننت های آماده ای نیز در Vue.js وجود دارند که برنامه نویسان مختلف می توانند بر اساس نیازشان آنها را مورد استفاده قرار دهند. سیستم ایجاد کامپوننت ها در Vue.js به صورت واکنشگر و یا reactive عمل می کند. این بدین معناست که Vue.js با استفاده از asynchronous event ها می‌تواند ارتباط بین child component ها و parent کامپوننت ها در قالب event هایی برقرار کند. در ضمن میتوان از جاوا اسکریپت و HTML و CSS نیز در کنار Vue.js است به بهترین شکل ممکن اتفاق خواهد افتاد.

سرفصل مطالب آموزش ویدئویی ساخت یک واسط کاربری (User Interface) با Vue.js

فصل اول: مقدمه دوره آموزشی

• خوش آمدگویی
• چه چیزی را باید از قبل بدانید؟
• استفاده کردن از فایل های پروژه

فصل دوم: شروع به کار با Vue.js

• ایجاد کردن یک اپلیکیشن ساده
• ایجاد کردن یک اپلیکیشن Modular
• بررسی Component Style ها
• بررسی کردن Lifecycle Hook ها

فصل سوم: کارکردن با Subcomponent ها

• ایجاد کردن یک Named Component
• اضافه کردن یک Nested Component
• استفاده کردن از Bootstrap Template ها و Style ها
• استفاده کردن از Computed Property ها

فصل چهارم: تغییر دادن داده ها با استفاده از Method ها و Event ها

• Bind کردن کلاس ها و Trigger کردن Event ها
• Emit کردن Event ها بین Module های ختلف
• حدف کردن Record ها درون یک زنجیره ی عمیق تر
• کار کردن و مدیریت کردن Edit Request ها

فصل پنجم: کار کردن با With Layout

• ساختن یک Search Component
• بررسی Component ها و Watcher ها
• سرچ کردن با استفاده از Proxy Array
• مرتب سازی کردن
• کنترل کردنِ روال مرتب سازی

فصل ششم: جمع بندی

• قدم های بعدی