اگر فریم ورک جاوا اسکریپتی Vue.js را در سایت گوگل ترند مورد بررسی قرار دهیم متوجه می شویم که این فریم ورک قدرتمند، در حال رشد می باشد و کاربران زیادی به دنبال یادگیری این فریم ورک می باشند. شما بعد از گذراندن این فرادرس متوجه خواهید شد که چه زمانی می توانید از این فریم ورک به جای فریم ورک های در حال حاضر Front-End استفاده کنید. عوامل زیادی وجود دارد که باعث می شود تا کاربران را برای فراگیری این فریم ورک ترغیب کند، عواملی چون:
- سهولت در یادگیری به دلیل این که همه افراد به دنبال این هستند که در کمترین زمان ممکن یک زبان برنامه نویسی را یاد بگیرند.
- تعداد خط کدهای نوشته شده و حجم کدها در فریم ورک Vue.js از فریم ورک های دیگر کمتر است و پیچیدگی خاصی ندارد و همین امر باعث شده است تا این فریم ورک تا این حد محبوب شود.
- انعطاف پذیری یعنی دست توسعه دهنده را باز می کذارد تا هر اپلیکیشنی را که می خواهد با هر روشی توسعه دهد و برنامه نویس را ملزم نمی کند تا فقط از یه روش خاص برنامه خود را توسعه دهد.
هدف از این آموزش این است که کاربران، بعد از گذارندن این فرادرس بتوانند در بخش Front-End حرفه ای تر شوند و بتوانند هر اپلیکیشنی را که دوست دارند توسعه دهند. در این فرادرس سعی بر این است که هر درس با مثال های متنوعی ارائه شود تا کاربران، با قابلیت های منحصر به فرد این فریم ورک قدرتمند آشنا شوند و در انتهای آموزش برای درک بهتر، ۵ پروژه کاربردی آورده شده است که یکی از این پروژها سبد خرید می باشد که بعد از مشاهده تمام قسمت ها می توانید سبد خرید حرفه ای و برنامه های بلادرنگ مانند: برنامه چت درست کنید.
فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
- درس یکم: 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
- نتیجه گیری
milad :
سلام
لطفا هر چه زود تر این آموزش رو اماده کنید و لطفا کامل و جامع باشه عالی میشه
ممنون
miladp :
سلام لطفا به پروژه چت قسمت مدیریت وهم چنین اخراج کاربران رو … رواضافه کنید درصورت امکان پروژه چت روم یشرفته رو برنامه نویسی کنید
سعید :
لظفا هر چی زودتر اموزشو منتشر کنید با تشکر
سهیل :
بسیار عالی. بی صبرانه منتظر انتشارش هستم