• برنامه نویسی فرانت اند جاوا اسکریپت ویو جی اس

آموزش فریمورک VUE.Js

  • 14 ساعت و 48 دقیقه
  • 2 فصل - 111 بخش
  • پیشرفته
4.8 126 دانشجو
4,499,000 تومان
course introduction

4,499,000 تومان

امکانات دوره
  • توضیح کامل مباحث
  • کاملا پروژه محور
  • آموزش مبانی
  • بروزرسانی مادام العمر
  • پشتیبانی ۲۴×۷

در یک نگاه

  • دانشجویان:126
  • فصل ها:2
  • بخش ها:111
  • مدت زمان:14 ساعت و 48 دقیقه
  • سطح:پیشرفته
  • زبان:فارسی
  • پشتیبانی:دارد

توضیحات دوره

ویو جی اس (Vue.js) چیه؟

فریمورک ویو جی اس یا بصورت مختصر  Vue( تلفظش مثل view میشه) یک فریمورک برای زبان برنامه نویسی Javascript  هست و کاربردش بیشتر برای ایجاد رابط کاربری دلپذیرتر و راحت تر در وب سایت ها هست.

با استفاده از Vue.js میتونیم وب سایتی طراحی کنیم که تک صفحه ای  (اصطلاحا spa یا single page application) باشه. تک صفحه بودن یک وب سایت باعث میشه که برای درخواست های کاربران، نیاز به رفرش صفحه نباشه! یعنی کاربر وقتی از سایت ما استفاده میکنه این احساس رو داره که یک اپلیکیشن دسکتاپ نصب کرده یا یک برنامه رو روی موبایل خودش اجرا کرده!

این ویژگی ها رو فریمورک های Angular.js و React.js هم دارن ولی ویژگی های دیگه vue.js هست که منحصر به فردش کرده.  ویو بسیار سبکه، یادگیری و درکش آسونه، به راحتی میتونین کدهای پروژه قبلی رو در پروژه جدید استفاده کنین، مستنداتش کامله، میتونین از ویو فقط برای بخشی از صفحه استفاده کنین و...

چرا این دوره؟

اگه آموزش های من رو دیده باشی میدونی که ویژگی اصلیشون پروژه محور بودن اونهاست. اگرم تا اینجا اومدی یعنی میدونی این فریورک چقدر معروف و محبوبه.

بهترین آموزشی که وجود داره روبروت قرار گرفته! نمیخوام با زیاد توضیح دادن سرت رو درد بیارم، خلاصه بگم که ابتدا کل مفاهیم نسخه 3 ویو که جدیدترین هم هست رو با یک مینی پروژه یاد میگیری و بعدش برای یادگیری فنون حرفه ای وارد یک پروژه واقعی میشی. در رابطه با این پروژه واقعی لازمه بدونی که طراحیش رو در آموزش html و css دیدی، همچنین بکند اون هم در آموزش های PHP و Laravel آموزش داده شده پس اگر به بکند هم علاقه داری بهترین گزینه واست لاراول هست که دوست جون در جونی ویو حساب میشه و کاملا با هم مچ هستن.

پیش نیازها؟

اگر برنامه نویسی یاد نداری فصل اول و دوم دوره الفبای برنامه نویسی رو ببین که با مفاهیم برنامه نویسی به صورت رایگان آشنا بشی. و اما پیش نیاز این دوره اینه که html و css و js بلد باشی. بهترین راهش هم دیدن آموزش html&css و js من هستش. یادت نره در طول یادگیری همراه تو هستم و اشکالات احتمالی و سوالات رو رفع میکنم. پس بیشتر ازین وقت تلف نکن و آموزش رو شروع کن.

مباحث

  • بخش: 1
    معرفی فریم ورک VUE.js
  • بخش: 2
    آماده سازی vs code و پروژه خالی
  • بخش: 3
    Option API / data() - Basics / v-on
  • بخش: 4
    Option API - methods
  • بخش: 5
    Basics - @input
  • بخش: 6
    Basics - v-bind
  • بخش: 7
    Basics - v-model
  • بخش: 8
    مشکل استفاده از methods با هدف انجام عملیات محاسباتی
  • بخش: 9
    Option API - computed
  • بخش: 10
    Option API - watch
  • بخش: 11
    Basics - v-if / v-else / v-for
  • بخش: 12
    Composition API - ref and reactive
  • بخش: 13
    Composition API - function
  • بخش: 14
    Composition API - computed
  • بخش: 15
    Composition API - watch
  • بخش: 16
    Composition API - return
  • بخش: 17
    معرفی Vue CLI و Vite
  • بخش: 18
    Vue CLI - نصب
  • بخش: 19
    Vue CLI - توضیحات
  • بخش: 20
    Vite - نصب
  • بخش: 21
    Components - ایجاد یک کامپوننت - توضیحات ۳ بخش اصلی یک کامپوننت
  • بخش: 22
    Components - script setup
  • بخش: 23
    Components - slot - افزودن کد داینامیک به یک کامپوننت
  • بخش: 24
    Components - props - ارسال دیتا از والد به فرزند
  • بخش: 25
    Components - emit - دریافت دیتا توسط والد از فرزند
  • بخش: 26
    Components - provide and inject - ارسال دیتا به همه فرزندان
  • بخش: 27
    Components - provide and inject - دسترسی به متد والد توسط فرزندان
  • بخش: 28
    Components - کامپوننت های داینامیک - component tag
  • بخش: 29
    Forms - form submit
  • بخش: 30
    Components - keep alive - جلوگیری از ایجاد مجدد یک کامپوننت در هر فراخوانی
  • بخش: 31
    Forms - اعتبار سنجی یک input - @blur - dynamic css class
  • بخش: 32
    Forms - اعتبارسنجی چند input - form validation
  • بخش: 33
    Components and Forms - custom input component
  • بخش: 34
    Transition - انیمیشن یک المان - transition tag
  • بخش: 35
    Transition - انیمیشن سطرهای یک لیست - transition-group tag
  • بخش: 36
    Components and Transition - custom modal component
  • بخش: 37
    Vue Router - نصب و افزودن به برنامه - createRouter
  • بخش: 38
    Vue Router - مفهوم صفحه
  • بخش: 39
    Vue Router - نمایش کامپوننت ها ( router-view )
  • بخش: 40
    Vue Router - اشاره به یک آدرس خاص ( router-link ) - آدرس های وابسته به هم ( nested routes )
  • بخش: 41
    Vue Router - redirect
  • بخش: 42
    Vue Router - آدرس های داینامیک - params AS props - تعریف نام برای آدرس ها
  • بخش: 43
    بهبود تجربه کاربری در برنامه فعلی
  • بخش: 44
    Pinia - نصب و افزودن به برنامه
  • بخش: 45
    Pinia - ساخت یک store و استفاده از آن (defineStore) - reactive & ref AS state
  • بخش: 46
    Pinia - مفهوم Getters - computed & function AS getters
  • بخش: 47
    Pinia - functions AS actions
  • بخش: 48
    Axios - نصب و ارسال درخواست لاگین
  • بخش: 49
    Vue Router - guards - Professional Redirect
  • بخش: 50
    LocalStorage and Cryptojs - auto login
  • بخش: 1
    ایجاد پروژه خام
  • بخش: 2
    هدر سایت - base-button
  • بخش: 3
    هدر داشبورد
  • بخش: 4
    صفحه ورود
  • بخش: 5
    base-input
  • بخش: 6
    auth-store
  • بخش: 7
    عملیات خروج کاربر
  • بخش: 8
    عملیات ورود خودکار
  • بخش: 9
    axios config - ایجاد فایل apiStore
  • بخش: 10
    نمایش دسته بندی ها - کتابخانه صفحه بندی(pagination)
  • بخش: 11
    custom pagination component
  • بخش: 12
    جست و جوی دسته بندی - (filter category)
  • بخش: 13
    ثبت دسته بندی ۱
  • بخش: 14
    ثبت دسته بندی ۲
  • بخش: 15
    alert component
  • بخش: 16
    provide alert
  • بخش: 17
    بهبود کاربری کامپوننت base-input
  • بخش: 18
    ویرایش دسته بندی ۱
  • بخش: 19
    ویرایش دسته بندی ۲
  • بخش: 20
    modal component
  • بخش: 21
    حذف دسته بندی 1
  • بخش: 22
    حذف دسته بندی ۲
  • بخش: 23
    Table Component
  • بخش: 24
    Category Item Component
  • بخش: 25
    Category Store - all()
  • بخش: 26
    Category Store - remove()
  • بخش: 27
    Category Store - create() - getError()
  • بخش: 28
    Category Store - get()
  • بخش: 29
    Category Store - update()
  • بخش: 30
    Helper Store
  • بخش: 31
    صفحه پست ها
  • بخش: 32
    نمایش پست ها
  • بخش: 33
    فیلتر پست ها
  • بخش: 34
    Searchable Select
  • بخش: 35
    ثبت پست - آپلود تصویر
  • بخش: 36
    آپدیت پست
  • بخش: 37
    tinyMCE
  • بخش: 38
    نمایش دیدگاه ها
  • بخش: 39
    فیلتر دیدگاه ها
  • بخش: 40
    آپدیت دیدگاه
  • بخش: 41
    Base-Badge
  • بخش: 42
    نمایش کاربران
  • بخش: 43
    فیلتر کاربران
  • بخش: 44
    ایجاد کاربر
  • بخش: 45
    ویرایش کاربر
  • بخش: 46
    Route Permissions - بررسی مجوزهای دسترسی کاربران
  • بخش: 47
    صفحه گزارش گیری داشبورد
  • بخش: 48
    ایجاد فایل Store مربوط به صفحات سایت
  • بخش: 49
    افزودن Route های مربوط به صفحات سایت
  • بخش: 50
    هدر و فوتر سایت
  • بخش: 51
    صفحه اصلی - دریافت اطلاعات
  • بخش: 52
    صفحه اصلی - بخش اسلایدرها
  • بخش: 53
    صفحه اصلی - نمایش پست ها
  • بخش: 54
    صفحه جست و جو - نمایش پست ها
  • بخش: 55
    صفحه جست و جو - بخش فیلتر
  • بخش: 56
    صفحه نمایش پست - دریافت اطلاعات
  • بخش: 57
    صفحه نمایش پست - نمایش اطلاعات
  • بخش: 58
    ثبت دیدگاه
  • بخش: 59
    بازگشت به صفحه قبلی بعد از عملیات ورود - Redirect Back - Scroll Behavior
  • بخش: 60
    صفحه Not Found
  • بخش: 61
    صفحه ثبت نام

مهندس محمد نظری

  • ۱۳ سال تجربه
  • وب و اپلیکیشن
  • استاد دانشگاه
  • دبیر هنرستان

مفتخرم که این مجموعه رو انتخاب کردی٬ با تلاش خودت و راهنمایی های ما امیدوارم راه موفقیت رو به بهترین نحو طی کنی

همین الان یادگیری رو شروع کن

صفحه اینستاگرام ما رو دنبال کن تا از اخبار جدید باخبر بشی