دوره آموزشی Vue.js 2 برای طراحان وب
1 ساعت 58 دقیقهمبتدی2019-01-31
مدرسین

Joe Chellman
Web Designer, Author, Trainer
جزئیات دوره
Vue.js یک فریمورک محبوب جاوا اسکریپت است که می تواند برای ساخت اجزای تعاملی یا کل برنامه های تک صفحه ای استفاده شود. این یک چارچوب قدرتمند و منعطف برای طراحان وب مدرن است - خواه از مقدار کمی از آن استفاده کنید یا زیاد. در این دوره، جو چلمن راههای عملی برای ترکیب Vue.js در طراحیهای وب دنیای واقعی ارائه میدهد. او سه پروژه کوچک را معرفی میکند که از Vue سود میبرند: یک سفارشیساز محصول بهروزرسانی در زمان واقعی که نحوه مدیریت دادهها و پاسخگویی به رویدادها با Vue را نشان میدهد. دایرکتوری کارمند با استفاده از فرم های Vue و انیمیشن. و یک تابلوی وضعیت که تماس های API خارجی برقرار می کند و از یک جزء Vue شخص ثالث استفاده می کند. هر پروژه نشان می دهد که چه چیزی Vue را برای طراحان وب جالب و مفید می کند و راه حل هایی برای مقابله با چند چالش منحصر به فرد ارائه می دهد.
اهداف یادگیری
نصب Vue.js و Vue Devtools
ایجاد اجزای تعاملی
افزودن داده به اجزا
گوش دادن به رویدادها
اجزای داربست
فرم های ساختمان و سیم کشی
متحرک سازی انتقال ها
ترکیب دادههای زنده از طریق REST API
افزودن اجزای شخص ثالث Vue
اهداف یادگیری
نصب Vue.js و Vue Devtools
ایجاد اجزای تعاملی
افزودن داده به اجزا
گوش دادن به رویدادها
اجزای داربست
فرم های ساختمان و سیم کشی
متحرک سازی انتقال ها
ترکیب دادههای زنده از طریق REST API
افزودن اجزای شخص ثالث Vue
مهارت ها
Vue.jsJavaScript FrameworksPersonaWeb DevelopmentOpen Source
سرفصل ها
0. مقدمه
- 01 - با چارچوب محبوب Vue JavaScript شروع کنید
- 02 - آنچه باید بدانید
- 03 - کار با فایل های تمرین
1. معرفی Vue
- 04 - Vue چیست و برای چه مفید است
- 05 - مفاهیم و اصطلاحات Vue
- 06 - ابزار Vue
- 07 - نصب Vue devtools
2. پروژه اول - سفارشی ساز
- 08 - نصب Vue در یک سایت موجود
- 09 - ایجاد یک نمونه از ماکت
- 10 - شناسایی اجزا و داده ها
- 11 - افزودن داده به کامپوننت ما
- 12 - استفاده از مدل برای شروع تعامل
- 13 - استفاده از v-bind برای به روز رسانی کلاس ها
- 14 - قالب های ساده با ویژگی های محاسبه شده
- 15 - به یک رویداد با v-on گوش دهید
- 16 - علامت اختصاری برای نوشتن سریعتر
- 17 - چالش - انتخابگر رنگ را فعال کنید
- 18 - راه حل - انتخابگر رنگ را فعال کنید
3. پروژه دوم - مرورگر دایرکتوری
- 19 - برنامه ریزی کنید
- 20 - اجزای اولیه داربست
- 21 - داده های جزء را با props ارسال کنید
- 22 - فرم فیلترها را بسازید
- 23 - فرم فیلترها را سیم کشی کنید
- 24 - به به روز رسانی فرم های فیلتر پاسخ دهید
- 25 - رویداد فیلتر سفارشی را مدیریت کنید
- 26 - متحرک سازی با گروه انتقال
- 27 - چالش - قابلیت استفاده و انیمیشن بهتر
- 28 - راه حل - قابلیت استفاده و انیمیشن بهتر
4. پروژه سوم - به روز رسانی وضعیت
- 29 - ترکیب داده های زنده از طریق API های REST
- 30 - بازرسی کد شروع ما
- 31 - اولین فراخوانی API در روش چرخه حیات
- 32 - افزودن انیمیشن لودر با v-if
- 33 - وصل کردن فرم برای ارسال به روز رسانی
- 34 - به روز رسانی لیست پیام ها پس از ارسال
- 35 - اضافه کردن یک جزء شخص ثالث Vue
نتیجه
- 36 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی ایجاد و میزبانی یک سایت Full-Stack با استفاده از Vue.js
- دوره آموزشی یادگیری Nuxt.js
- دوره آموزشی مستند Vue.js
- دوره آموزشی Vue.js: آزمایش و اشکال زدایی
- دوره آموزشی یادگیری Vue.js
- دوره آموزشی یادگیری جامع Vue.js 3
- دوره آموزشی کار با API ها در Vue.js 2
- دوره آموزشی Vue.js 2: برنامه های Full-Stack با Firebase