
نصب و راه اندازی اولیه
برای نصب Vue باید به سایت رسمی آن به آدرس https://vuejs.org/ بروید. در صفحه اصلی دکمه ای به نام Get Started وجود دارد که با کلیک روی آن به صفحه https://vuejs.org/v2/guide/ انتقال داده می شوید. برای شروع کار روی گزینه Installation کلیک کنید تا به صفحه نصب Vue انتقال داده شوید. چندین راه برای نصب و راه اندازی Vue وجود دارد و من برای شروع از راه آسان و ساده استفاده می کنم. بعدا در طول این دوره آموزش رایگان Vue و Webpack استفاده خواهیم کرد تا نهایت بهینه سازی را در پروژه اعمال کنیم (این کار نیازمند راه اندازی پیچیده تری است که فعلا با آن کاری نداریم).
روش ساده یعنی یا Vue را دانلود کرده و به صورت دستی درون پروژه خود قرار دهید، یا اینکه آن را از یک CDN بگیرید. تفاوتی ندارد که شما کدام روش را انتخاب کنید اما من CDN را انتخاب می کنم بنابراین در همان صفحه Installation لینک آن را می گیرم:

https://unpkg.com/vue@2.6.11/dist/vue.js
این لینک از CDN سایت unpkg گرفته شده است اما شما می توانید از هر کدام از CDN های موجود در سایت Vue استفاده کنید. فقط توجه داشته باشید که Vue پکیج های مختلفی دارد که برای توسعه (Development یا همان کدنویسی) و تولید (production یا استفاده از سایت) می باشند. شما باید در این دوره پکیج development را انتخاب کنید تا بتوانیم انواع خطاها و گزارشات را دریافت کنیم (لینک بالا لینک خوبی است).
من برای تمرین اولیه به سایت jsfiddle.net می روم که یک سایت تمرینی برای ایجاد برنامه های ساده است. کدهایی که از این قسمت به بعد می نویسم به شکل نهایی در آدرس https://jsfiddle.net/xnf2vc3h/ برای شما قابل دسترس خواهند بود.
در قسمت HTML آن پکیج Vue را وارد می کنم:
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
شما می توانید لینک را در همین حالت باقی بگذارید اما کار بهتر این است که شماره نسخه Vue را از لینک حذف کنید تا همیشه از آخرین نسخه استفاده کنید:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
با این کار می توانیم از Vue استفاده کنیم. من می خواهم یک فیلد ساده جاوا اسکریپتی داشته باشم که هر چه درون آن نوشته شد، برای من نمایش بدهد. برای این کار ابتدا در قسمت کدهای جاوا اسکریپت یک نمونه از کلاس Vue را می سازیم. نمونه هایی که از کلاس Vue ساخته می شوند، هسته برنامه های ما هستند. این نمونه ها همیشه کنترل کدهای HTML را بر عهده دارند:
New Vue();
پارامتری که باید به آن پاس بدهیم یک شیء جاوا اسکریپتی است که خصوصیتی به نام el (مخفف element و به معنای «عنصر») را دارد. El یعنی چه عنصری را در کدهای HTML هدف خواهیم گرفت. برای این کار کدهای HTML خودم را به شکل زیر تغییر می دهم:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p></p> </div>
همانطور که می بینید یک Div با آیدی app داریم که درون آن یک پاراگراف ساده وجود دارد. حالا در قسمت کدهای جاوا اسکریپتی می گوییم:
new Vue({ el: '#app' });
رشته ای که به el داده می شود مانند querySelector جاوا اسکریپت است، بنابراین app# یعنی آیدی App و اگر از نقطه استفاده می کردیم به معنی کلاس app بود و الی آخر. با این کار گفته ام این نمونه از Vue مسئول هدف گرفتن عنصری با آیدی app است. حالا برای نمایش دادن چیزی، نیاز به داده ای داریم و گرنه نمی توانیم چیزی را نمایش بدهیم. برای این کار شیء Vue یک خصوصیت به نام data دارد که تمام داده های مورد نیاز ما در این نمونه Vue به آن پاس داده می شود. من می گویم:
new Vue({ el: '#app', data: { title: 'Hello World!' } });
همانطور که می بینید data از نوع شیء است نه رشته. همچنین نام title کاملا انتخابی است و شما می توانید نام دیگری انتخاب کنید. حالا می توانیم در قسمت کدهای HTML خود بگوییم:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p>{{ title }}</p> </div>
استفاده از علامت {{}} یک Syntax خاص برای Vue است. با این کار گفته ایم از قسمت data مربوط به این قسمت (div با آیدی App) به دنبال خصوصیتی به نام title بگرد و مقدار آن را در این قسمت نمایش بده. حالا با زدن Ctrl + Enter در Jsfiddle این کد اجرا می شود و مقدار Hello World را در قسمت خروجی مشاهده می کنیم.
قصد من این بود که با این مثال ساده با قدرت Vue آشنا شده باشید.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI
سلام و درود
به صورت کلی مطالب رو بررسی کردم .
تمامی آموزش ها ساده و روان هست.
شروع کردم به یاد گیری.
سپاس از آموزش های مفیدتون