میتوانم شکست را بپذیرم اما تلاش نکردن را هرگز!
آموزش ویو جی‌اس (Vue Js)
ویو جی اس (Vue.js) یکی از کتابخانه های جاوا اسکریپت است که به ما در ساختن اپلیکیشن های تحت وب تحت معماری MVVM یا همان (Model–View–ViewModel) کمک می کند. اگر می خواهید رابط کاربری تعاملی ایجاد نمائید Vue.js را به شما پیشنهاد می کنیم که بهترین گزینه در سال ۲۰۱۶ بوده است که توسط بزرگ ترین کمپانی ها نظیر Alibaba (بزرگترین شرکت تجارت الکترونیک چین) استفاده می شود. بنابراین می توانید آن را به عنوان یک انتخاب مطمئن در نظر بگیرید.
Vuejs چیست؟
برنامه‌نویسی کامپیوتر فارغ از پیشرفت‌های بزرگ صورت پذیرفته، همچنان کاری زمان‌بر و دشوار است. زیرا با وجود توسعه‌ی ابزارها و روش‌های نوین، نیازها با سرعت بیشتری پیچیدگی و گستردگی پیدا کرده‌اند. به همین دلیل تلاش برای ساده‌سازی و کاهش زمان و مهارت لازم در جهت تولید نرم‌افزار همچنان در جریان است.
در بخش رابط کاربری کتابخانه‌های بزرگ و کوچک متعددی ایجاد شده‌اند که تلاش می‌کنند، فرآیندهای مورد نیاز برای دریافت و نمایش اطلاعات به کاربر را ساده‌سازی کنند. از آن جمله می‌توان به کتابخانه‌ی بزرگ و مشهور jQuery اشاره کرد. همچنین کتابخانه‌های نسل جدید React توسط فیسبوک و AngularJS توسط گوگل نیز به همین منظور ایجاد گشته‌اند.
در این نوشته با یکی از کتابخانه‌های رایگان و محبوب برای ایجاد رابط کاربری نرم‌افزارهای هوشمند تحت وب به نام Vue.js یا VueJS آشنا خواهیم شد.
کتابخانه رابط کاربر چیست ؟
در شکل سنتی، برای ایجاد نرم‌افزارهای هوشمند و کارآمد تحت وب با استفاده از جاوااسکریپت یا jQuery، نوشتن حجم زیادی از کدها به صورت ساخت‌یافته کاری دشوار و بیش از اندازه تخصصی است. به همین دلیل یافتن متخصصینی که توانایی استفاده از روش‌های سنتی برای تولید با کیفیت این گونه نرم‌افزارها را داشته باشند کاری بسیار دشوار است.
کتابخانه‌های رابط کاربر مانند React، AngularJS و Vue.js ابزارهایی هستند که پیچیدگی‌های تولید رابط کاربری را پشت لایه‌ای از کدهای قابل درک و آسان مخفی می‌کنند و علاوه بر آسان‌سازی، سرعت برنامه‌نویسی را نیز افزایش می‌دهند.
همچنین، به دلیل توسعه و آزمون توسط جامعه‌ی بزرگی از برنامه‌نویسان، پشتیبانی بهتری از حالت‌های مختلف و مرورگرهای متفاوت و متعدد امروزی در سیستم‌های رومیزی و موبایل به عمل می‌آورند.
نرم‌افزار هوشمند تحت وب چیست ؟
نرم‌افزارهای سنتی تحت وب، با هر کلیک یا برای برخی از فرآیندها نیازمند بارگزاری مجدد صفحه هستند. با کمک فناوری AJAX برخی از بخش‌های نرم‌افزار توانایی پاسخگویی بدون تازه‌سازی صفحه فراهم می‌شود. ایجاد یک نرم‌افزار هوشمند تحت وب مانند آنچه در وبسایت GMail رخ می‌دهد بدون استفاده از کتابخانه‌های رابط کاربر نسل جدید کاری بسیار سخت و توسعه‌ی چنین ابزارهایی به مراتب با دشواری‌های بیشتر همراه خواهد بود.
یک نرم‌افزار هوشمند تحت وب، با یک بار بارگزاری، تمامی یا اغلب فعالیت‌های لازم را بدون تازه‌سازی( Refresh ) صفحه به انجام می‌رساند و اطلاعات ارسالی و دریافتی کاربر را همگی با استفاده از فناوری AJAX با سرور رد و بدل می‌کند
کتابخانه‌های مشابه
در ادامه فهرستی از مشهورترین جایگزین‌های Vue.js مشاهده خواهید کرد. هر یک از این کتابخانه‌ها مزایا و معایب خود را دارا هستند که انتخاب بهینه از میان آن‌ها به مطالعه و بررسی کافی نیازمند خواهد بود.
- React
- AngularJS
- Ember
- Knockout
- Riot
- Polymer
-
درس یکم: Vue.js
- هدف استفاده از Vue.js
- ضرورت آموزش Vue.js
- معرفی فریم ورک Vue.js
- نصب و راه اندازی Vue.js
- مفاهیم اولیه فریم ورک قدرتمند جاوا اسکریپت Vue.js
- مقایسه فریم ورک Vue.js با چند فریم ورک دیگر
-
درس دوم: کار با Vue instance
- نحوه ایجاد Vue instance
- داده ها و متدها
- قالب چرخه عمر یا چرخه حیات
- مفهوم نمودار چرخه حیات
-
درس سوم: قاعده کار
- کار با Text
- نحوه کار با Raw HTML
- نحوه کار با Attribute
- نحوه کار با اصلاحات جاوا اسکریپت
- معرفی و توضیح Directive
- مفهوم Directives Data Binding
-
درس چهارم: کار با Computed Properties and Watchers
- معرفی و نحوه کار با Computed
- مثال از Computed
- توضیح و نحوه کار با Computed Caching vs Methods
- توضیح و نحوه کار با Computed vs Watched Property
- توضیح و نحوه کار با Computed Setter
- توضیح و نحوه کار با Watchers
- معرفی و توضیح Props
-
درس پنجم: بایند کردن کلاس و استایل
- بایند کردن کلاس Binding HTML Classes
- بایند کردن کلاس به صورت آرایه Array Syntax
- بایند کردن به وسیله Components
- بایند کردن استایل Binding Inline Styles
-
درس ششم: کار با شرط ها و حلقه ها در Vue.js
- کار با v-if
- کار با v-else و v-else-if
- کار با v-show و v-else-if
- پیمایش آرایه ها با استفاده از v-for در Vue.js
- Caveats
- نمایش نتایج فیلتر شده – مرتب شده
- کار با Range در v-for
- نحوه کار حلقه ها در کامپوننت
- v-for در template
- نحوه استفاده از v-for در کنار v-if
-
درس هفتم: مدیریت رخدادها در Vue.js
- گوش دادن به رخدادها
- نحوه استفاده Event ها در Methods
- نحوه ارسال پارامتر به Methods
- حالت های مختلف رویداد Click و Submit
- کار با انواع رویدادهای صفحه کلید در Vue.js
- کار با رویدادهای خودکار صفحه کلید
- کار با رویدادهای سیستمی صفحه کلید
- کار با Exact Modifier
- کار با رویدادهای موس
- ایجاد یک پروژه کوچک برای درک بهتر
-
درس هشتم: کار با input ها
- نحوه کار با Text
- نحوه کار با Textarea
- نحوه کار با Checkbox و بایند کردن آن
- نحوه کار با Radio و بایند کردن آن
- نحوه کار با Select و بایند کردن آن
- کار با Lazy
- کار با Number
- کار با Trim
- ایجاد یک پروژه کوچک برای درک بهتر
-
درس نهم: مبانی کامپوننت ها
- مفهوم استفاده مجدد از کامپوننت ها
- مفهوم سازماندهی کردن کامپوننت ها
- کار با کامپوننت های پدر و فرزند
- انتشار یک مقدار با یک رویداد
- نحوه استفاده V-Model در کامپوننت ها
- Data باید یک تابع باشد
- کامپوننت های پویا
-
درس دهم: ثبت کامپوننت ها
- مفهوم Component names
- انواع صحیح نامگذاری Name Casing
- ثبت کامپوننت به صورت سراسری
- ثبت کامپوننت به صورت محلی
- کار با ماژول های سیستم
- ثبت کامپوننت تقویم فارسی
-
درس یازدهم: کار با Props
- ساختار Camel case یا Kebab-case Prop Casing) Camel case vs Kebab-case)
- کار با Prop های ایستا و پویا
- یک راه برای انتقال داده وجود دارد
- اعتبار سنجی با Prop
- کار با Non-Prop Attributes
-
درس دوازدهم: کار با رویدادهای دلخواه Custom Events و آموزش کار با Slots
- نحوه ایجاد رویداد Event Names
- ایجاد کامپوننت های سفارشی با V-Model
- رویدادهای محلی مرتبط با کامپوننت
- کار با Sync modifier
- کار با Slot Content
- نامگذاری Slots
- محتوای پیش فرض اسلات ها
- کار با Compilation Scope
- کار با Scoped Slots
-
درس سیزدهم: کامپوننت های همگام و پویا
- کار با Keepalive در کامپوننت های پویا
- کامپوننت های همزمان
-
درس چهاردهم: کار با Handling Edge Cases
- نحوه کار با Element & Component Access
- نحوه کار با Programmatic Event Listeners
- نحوه کار با Circular References
- کار با Alternate Template Definitions
-
درس پانزدهم: کار با Transitions & Animations
- کار با Transitioning Single Elements – Components
- کار با Transition classes
- کار با CSS Transitions
- کار با CSS Animations
- کار با Custom Transition Classes
- مرتب سازی لیست ها
- پروژه کوچک جستجو در لیست با استفاده از Staggering List Transitions
- کار ترانزیشن های پویا
- کار با Reusable Transitions
- State transition
- کار با Animating State with Watchers
- کار با Dynamic State Transitions
- پروژه ساخت یک ادیتور ساده
-
درس شانزدهم: کار Custom Directives و Mixin
- Option Merging
- Global Mixin
- کار با Custom Option Merge Strategies
- معرفی و توضیح Custom Directives
- کار با Directive Hook Arguments
-
درس هفدهم: کار Render Functions & JSX
- گره ها، درختان و DOM مجازی
- جایگزینی ویژگی های قالب با ساده جاوا اسکریپت
- کار با Functional Components
- کار با Template Compilation
- کار با فیلترها
- کار با Routing
-
درس هجدهم: ساخت اپلیکیشن To Do List با استفاده از Vue.js 2
- پیش نیازها
- ساخت یک اپلیکیشن Vue.js 2
- ساختار کامپوننت
- فراخوانی (ایمپورت) کامپوننت ها
- افزودن داده به کامپوننت
- ایجاد حلقه و پردازش اطلاعات
- ویرایش یک فعالیت
- اضافه کردن یک فعالیت جدید
- فرمان تکمیل کردن یک فعالیت
-
درس نوزدهم: انجام پروژهای مختلف با استفاده از Vue.js 2
- پروژه ساخت فرم ثبت نام و مشاهده اطلاعات در قالب جدول با استفاده از Firebase
- پروژه جستجوی مطالب سایت با قابلیت مرتب سازی با استفاده از Vue.js
- پروژه افزودن به سبد خرید به صورت Real-time با استفاده از Vue.js
- پروژه ساخت چت روم به صورت Real-time با استفاده از Vue.js
- نتیجه گیری
برای یادگیری Vue Js چه چیز را باید از قبل بدانیم !
قبل از اینکه مطالعه ی آموزش Vue Js (ویو جی‌اس) را شروع کنید، شما باید دانش پایه ای(حداقلی) از موارد زیر را داشته باشید
واژگان کلیدی
موقعیت مکانی
