آموزش Vue.js برای طراحان وب

سرفصل ها و درس ها

مقدمه Introduction

• با چارچوب محبوب Vue JavaScript شروع کنید Get started with the popular Vue JavaScript framework

• آنچه باید بدانید What you should know

• کار با پرونده های تمرینی Working with the exercise files

1. معرفی Vue 1. Introducing Vue

• Vue چیست و چه فایده ای دارد؟ What is Vue and what is it good for?

• مفاهیم Vue و jargon Vue concepts and jargon

• ابزارهای Vue Vue tools

• نصب Vue devtools Installing the Vue devtools

2. پروژه اول: Customizer 2. First Project: Customizer

• نصب Vue در یک سایت موجود Installing Vue on an existing site

• ایجاد نمونه ای از ساختگی Creating an instance from the mock-up

• شناسایی مؤلفه ها و داده ها Identifying components and data

• افزودن داده به مؤلفه ما Adding data to our component

• استفاده از یک مدل برای شروع تعامل Using a model to begin interactivity

• استفاده از v-bind برای بروزرسانی کلاس Using v-bind to update classes

• قالب های ساده با ویژگی های محاسبه شده Simple templates with computed properties

• یک رویداد با v-on گوش دهید Listen for an event with v-on

• نماد اختصاری برای نوشتن سریعتر Shorthand notation for faster writing

• چالش: انتخاب رنگ را فعال کنید Challenge: Activate the color selector

• راه حل: انتخاب رنگ را فعال کنید Solution: Activate the color selector

3. پروژه دوم: مرورگر دایرکتوری 3. Second Project: Directory Browser

• ایجاد یک طرح Make a plan

• اجزای اولیه داربست Scaffold initial components

• داده های مؤلفه را با غرفه ها عبور دهید Pass component data with props

• فرم فیلترها را بسازید Build the filters form

• فرم فیلترها را سیم کنید Wire up the filters form

• به بروزرسانی فرم فرم پاسخ دهید Respond to filter form updates

• رویداد فیلتر سفارشی را کنترل کنید Handle custom filter event

• انیمیشن با گروه گذار Animating with transition-group

• چالش: قابلیت استفاده بهتر و انیمیشن Challenge: Better usability and animation

• راه حل: قابلیت استفاده بهتر و انیمیشن Solution: Better usability and animation

4. پروژه سوم: بروزرسانی وضعیت 4. Third Project: Status Updater

• درج داده های زنده از طریق API های REST Incorporating live data via REST APIs

• بررسی کد شروع ما Inspecting our starting code

• اولین تماس API به روش چرخه عمر First API call in a life cycle method

• اضافه کردن انیمیشن لودر با v-if Adding a loader animation with v-if

• برای ارسال به روزرسانی ، فرم را جستجو کنید Hooking up the form to post an update

• لیست پیام ها را بعد از ارسال به روز کنید Updating message list after posting

• افزودن یک مؤلفه Vue شخص ثالث Adding a third-party Vue component

نتیجه Conclusion

• مراحل بعدی Next steps