پرووید
آموزش ویدئویی شروع به کار با ویو جی اس Vue.js
آموزش ویدئویی شروع به کار با ویو جی اس Vue.js یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی آموزشی شروع به کار با Vue.js است که با نام اصلی Vue.js: Getting Started از شرکت Pluralsight منتشر شده است.
Vue.js چیست؟
فریم ورک Vue.js فریم ورک پیشرونده و یا progressive framework می باشد که به منظور ایجاد کردن واسط کاربری برنامه های وب استفاده می شود. علیرغم اتفاقی که در فریم ورک های monolithic دیگر رخ می دهد، این فریم ورک از ابتدای کار با در نظر گرفتن این موضوع که می بایست به صورت افزایشی و یا incremental قابل استفاده باشد طراحی و پیاده سازی شده است. در این فریم ورک core library فقط بر روی view layer متمرکز شده است.
یادگیری Vue.js و استفاده کردن از آن به سادگی امکان پذیر است و حتی می توان از آن در کنار دیگر library ها و یا پروژه ها استفاده کرد. علاوه بر این می توان از این فریم ورک برای ساختن single page application ها در کنار دیگر ابزار ها استفاده نمود. علاوه بر این توصیه می کنیم که از نیز دیدن کنید.
کاربرد Vue.js در توسعه رابط کاربری وب
Vue.js یک فریم ورک JavaScript برای ساخت رابط کاربری برنامه‌های وب است که به توسعه‌دهندگان اجازه می‌دهد بخش‌های تعاملی صفحات را به شکلی ساخت‌یافته پیاده‌سازی کنند. این فریم ورک با رویکردی تدریجی طراحی شده است؛ بنابراین می‌توان آن را در بخشی از یک صفحه موجود به کار گرفت یا از آن برای ساخت رابط‌های کاربری پیچیده‌تر استفاده کرد. این انعطاف‌پذیری باعث می‌شود Vue.js برای پروژه‌هایی با اندازه‌ها و نیازهای متفاوت گزینه‌ای قابل بررسی باشد.
در توسعه رابط کاربری، تغییر داده‌ها معمولاً باید در نمایش صفحه نیز منعکس شود. Vue.js سازوکارهایی فراهم می‌کند که ارتباط میان داده‌ها و بخش‌های رابط کاربری را مدیریت می‌کنند و به‌روزرسانی نمایش را ساده‌تر می‌سازند. آشنایی با این امکانات به برنامه‌نویسان کمک می‌کند کدهای مربوط به رابط کاربری را منظم‌تر بنویسند و رفتار بخش‌های تعاملی برنامه را بهتر کنترل کنند. یادگیری Vue.js می‌تواند نقطه شروعی برای ساخت رابط‌های کاربری واکنش‌گرا با JavaScript باشد.
ساخت Template در Vue.js و اتصال داده‌ها به فرم‌ها
Templateها در Vue.js ساختار بخش قابل مشاهده رابط کاربری را مشخص می‌کنند و به توسعه‌دهنده اجازه می‌دهند داده‌ها را در قالب عناصر صفحه نمایش دهد. به‌جای تولید دستی تمام محتوای HTML در کد JavaScript، می‌توان از قالب‌های Vue.js برای تعریف ساختار نمایش استفاده کرد. این جداسازی نسبی، خواندن و نگهداری کد را آسان‌تر می‌کند و کمک می‌کند ارتباط میان داده‌های برنامه و اجزای رابط کاربری روشن‌تر باشد.
در فرم‌های وب، لازم است مقدار فیلدها با داده‌های برنامه هماهنگ بماند و تغییرات کاربر به‌درستی دریافت شود. Vue.js امکاناتی برای Binding یا اتصال داده‌ها به عناصر فرم ارائه می‌دهد تا مدیریت ورودی‌هایی مانند متن و گزینه‌های انتخابی ساده‌تر شود. با شناخت این روش‌ها می‌توانید فرم‌هایی تعاملی بسازید که وضعیت داده‌ها در آن‌ها به شکل منظم‌تری مدیریت شود. این مفاهیم از پایه‌های مهم کار با Vue.js در توسعه برنامه‌های وب هستند.
مدیریت رویدادها و نمایش شرطی در Vue.js
در یک رابط کاربری تعاملی، کاربران با کلیک کردن، وارد کردن متن یا انتخاب گزینه‌ها باعث اجرای عملیات مختلف می‌شوند. Vue.js امکان مدیریت User Eventها را فراهم می‌کند تا بتوانید واکنش برنامه به این تعاملات را تعریف کنید. برای نمونه، می‌توان هنگام کلیک روی یک دکمه تابعی را اجرا کرد یا بر اساس تغییر ورودی کاربر، وضعیت بخشی از رابط کاربری را به‌روزرسانی کرد. این قابلیت‌ها به توسعه‌دهنده کمک می‌کنند رفتار صفحه را به شکل منظم و قابل فهم پیاده‌سازی کند.
گاهی لازم است یک عنصر تنها در شرایط خاص نمایش داده شود یا مجموعه‌ای از داده‌ها به شکل تکرارشونده در صفحه قرار بگیرند. Conditional Rendering برای کنترل نمایش عناصر بر اساس وضعیت برنامه استفاده می‌شود و قابلیت رندر کردن لیست‌ها امکان نمایش مجموعه داده‌ها را فراهم می‌کند. این امکانات در ساخت رابط‌هایی مانند فهرست محصولات، پیام‌های وضعیت و بخش‌های وابسته به شرایط کاربرد دارند. یادگیری آن‌ها کمک می‌کند رابط کاربری را با منطق برنامه هماهنگ‌تر طراحی کنید.
واکنش‌پذیری داده‌ها در Vue.js و مدیریت تغییرات
یکی از مفاهیم مهم در Vue.js، واکنش‌پذیری داده‌ها است؛ یعنی تغییر در داده‌های مرتبط می‌تواند به‌روزرسانی بخش‌های وابسته رابط کاربری را به دنبال داشته باشد. این ویژگی باعث می‌شود توسعه‌دهنده نیاز کمتری به دست‌کاری دستی عناصر صفحه برای هماهنگ نگه داشتن نمایش و داده‌ها داشته باشد. در نتیجه، مدیریت وضعیت رابط کاربری ساده‌تر می‌شود و ارتباط میان منطق برنامه و آنچه کاربر مشاهده می‌کند، ساختار روشن‌تری پیدا می‌کند.
Vue.js ابزارهایی مانند Computed Propertyها و Watcherها را برای کار با داده‌ها و واکنش به تغییرات در اختیار برنامه‌نویس قرار می‌دهد. Computed Property برای محاسبه مقادیری که از داده‌های دیگر به دست می‌آیند کاربرد دارد، در حالی که Watcher امکان اجرای منطق مشخص هنگام تغییر یک مقدار را فراهم می‌کند. Filterها نیز در نسخه‌ها و الگوهای مربوط به این آموزش برای پردازش یا قالب‌بندی داده‌های نمایشی مطرح می‌شوند. آشنایی با این مفاهیم به شما کمک می‌کند رفتار داده‌ها را در رابط کاربری بهتر مدیریت کنید.
سرفصل مطالب آموزش ویدئویی شروع به کار با Vue.js
فصل اول: مقدمه دوره ی آموزشی
- مقدمه
فصل دوم: معرفی Vue.js
- معرفی Vue.js
- چرا می بایست از Vue.js استفاده کرد؟
- سادگی کار با Vue.js
- سرعت بسیار بالای اجرا در Vue.js
- دیگر مباحث مهم مربوط به استفاده کردن از Vue.js
- نصب کردن و راه اندازی Vue.js
- نصب کردن Vue.js
- نصب کردن Axios
- ایجاد کردن یک Instance از Vue.js
- Mount کردن Instance ایجاد شده از Vue.js
- بررسی چرخه ی حیات و یا Life cycle مربوط به Vue.js
فصل سوم: ساختن Template ها در Vue.js
- معرفی Template ها
- تعریف کردن داده های Template ها
- بارگذاری کردن Property ها
- نام گذاری Property ها
- درک بهتر مقادیر درون Property ها
- انجام Binding محتوا به Template ها
- انجام Binding به متن
- بررسی Semantic Binding
- بررسی Declarative Binding
- بررسی One Time Binding
- انجام Binding به HTML
- انجام Binding به HTML Attribute ها
- معرفی دستور Bind
- انجام Binding به CSS Property ها
- انجام Binding به CSS Class ها
- استفاده کردن از JavaScript Expression ها
فصل چهارم: انجام Binding به Form ها در Vue.js
- مقدمه ای بر انجام Binding به Form ها
- استفاده کردن از Input Binding
- انجام Binding به Text Field ها
- انجام Binding به Checkbox ها
- انجام Binding به Radio Button ها
- انجام Binding به Drop Down List ها
- تغییر دادن مقادیر Bind شده
- استفاده کردن از Trim Modifier
- استفاده کردن از Number Modifier
- بررسی Lazy Binding
فصل پنجم: هندل کردن User Event ها در Vue.js
- هندل کردن User Event ها
- استفاده کردن از Event Handler ها
- تعریف کردن از Event Handler ها
- بررسی Event ها و پاس دادن پارامتر ورودی
- تغییر دادن رفتار Event ها
- بررسی Event Propagation
- بررسی Event Capturing
- استفاده کردن از Prevent Modifier
- استفاده کردن از Stop Modifier
- استفاده کردن از Self Modifier
- استفاده کردن از Once Modifier
- هندل کردن Event های صفحه کلید
- ایجاد کردن Key Modifier ها
- هندل کردن رویدادهای موس
- هندل کردن رویدادهای کلیدهای خاص
فصل ششم: انجام Conditional Rendering و رندر کردن لیست ها
- بررسی Conditional Rendering و رندر کردن لیست ها
- رندر کردن شرطی Element ها
- رندر کردن شرطی در زمان بارگذاری شدن برنامه
- رندر کردن شرطی در زمان Runtime
- رندر کردن عناصر درون لیست
- استفاده از حلقه های تکرار به تعداد دفعات مشخص
- پیمایش Property های درون یک Object
- پیمایش کردن آرایه ها
- استفاده کردن از دستورات v-for و v-if در کنار یکدیگر
- تشخیص دادن تغییرات درون آرایه ها
- استفاده کردن از توابع مرتب سازی آرایه ها
- استفاده کردن از تابع sort
- استفاده کردن از تابع reverse
- اضافه کردن عناصر و حذف کردن عناصر در آرایه ها
- استفاده کردن از توابع shift و unshift
- استفاده کردن از تابع splice
- به روز رسانی کردن عناصر درون آرایه
فصل هفتم: واکنش به تغییرات داده ها با Filter ها، Computed Property ها و Watcher ها
- مقدمه
- رصد کردن تغییرات داده ها با استفاده از Watcher
- تعریف کردن رفتارهای یک Watcher
- تعریف کردن عمق یک Watcher
- رندر کردن سریع تر با استفاده از Computed Property ها
- استفاده کردن از Computed Property به عنوان Accessor ها
- فرمت بندی کردن با استفاده از Filter ها
- تعریف کردن یک Filter
- فراخوانی یک Filter
- زنجیر کردن Filter ها به یکدیگر
- مقایسه کردن Filter ها و Method ها
محصولات مرتبط
آموزش توسعه نرم افزارهای وب با jQuery UI
توسعه نرم افزارهای وب (Web Development)
