
قبل از شروع این جلسه بهتر است نکته ای را به شما گوشزد کنم: خصوصیاتی که در props تعریف می کنید مانند یک خصوصیت عادی در کامپوننت های شما در دسترس هستند. به طور مثال به جای اینکه myName را به صورت زیر نمایش بدهم:
<p>User Name : {{ myName }}</p>
آن را مانند یک خصوصیت عادی با یک تابع برمی گردانم. به کد زیر توجه کنید:
<script> export default { props: ["myName"], methods: { switchName () { return this.myName.split("").reverse().join(""); } } }; </script>
من در اینجا گفته ام که خصوصیت myName را گرفته و کاراکترهای آن را از هم جدا کن، سپس کاراکتر ها را برعکس کرده و دوباره به هم بچسبان. نکته مهم این است که من می توانم به صورت this.myName به خصوصیت دریافتی از prop دسترسی داشته باشم. حالا در کدهای template می گوییم:
<p>User Name : {{ switchName() }}</p>
با اجرای این کد، خروجی oxoR را خواهیم داشت (برعکس شده Roxo).
حالا که این نکته را تکمیل کردیم نوبت به بحث اعتبارسنجی prop ها می رسد. در بسیاری از مواقع باید بتوانیم prop های خود را اعتبارسنجی کنیم تا تایپ مورد نظری را دریافت کنیم. مثلا اگر در کد بالا به جای رشته، عدد پاس داده شود دیگر split کردن معنی نخواهد داشت (split از توابع رشته ای است) بنابراین برای جلوگیری از ایجاد خطا در برنامه باید منطق اعتبارسنجی داشته باشیم.
اگر بخواهیم props را اعتبارسنجی کنیم، باید به جای آرایه از یک شیء استفاده کنیم (فایل userDetail.vue):
<script> export default { props: { myName: String }, methods: { switchName () { return this.myName.split("").reverse().join(""); } } }; </script>
همانطور که می بینید در این شیء key همان نام خصوصیت شماست و value آن تایپ prop می باشد (در کد بالا string یا رشته را قرار داده ام). البته شما می توانید چند نوع تایپ را برای یک prop تعیین کنید:
props: { myName: [String, Array] }
این کد می گوید myName می تواند رشته یا آرایه باشد. البته ما اینجا فقط string را قرار می دهیم بنابراین آن را به حالت قبل برمی گردانم:
props: { myName: String }
حالا که اعتبارسنجی را داریم، باید آن را تست کنیم. به فایل User.vue رفته و مثل من به جای پاس دادن name یک عدد را پاس بدهید:
<app-user-detail :myName="1"></app-user-detail>
حالا اگر کدها را ذخیره کرده و به مرورگر بروید (npm run dev در حال اجرا باشد) در قسمت کنسول مرورگر به خطا برمی خورید:

علاوه بر این خطا، کل این کامپوننت هم حذف می شود و دیگر در مرورگر قابل مشاهده نخواهد بود.
هنوز کار ما تمام نشده است. Vue به ما گزینه های بیشتری برای اعتبارسنجی داده است. به طور مثال به جای پاس دادن string می توانیم یک شیء جداگانه پاس بدهیم که خصوصیات type و required را داشته باشید. type همان تایپ prop است (مثلا رشته یا عدد یا آرایه یا غیره) و required نیز مشخص کننده اجباری بودن آن prop است (آیا این prop حتما باید پاس داده شود یا غیر الزامی است؟):
<script> export default { props: { myName: { type: String, required: true } }, methods: { switchName () { return this.myName.split("").reverse().join(""); } } }; </script>
بدین صورت گفته ایم prop ای به نام myName دریافت خواهد شد که رشته ای است و حتما باید حضور داشته باشد (required). اگر required را اینجا ننویسیم، می توانیم در فایل user.vue اصلا آن را پاس ندهیم:
<app-user-detail></app-user-detail>
این کد کاملا معتبر است چرا که اجباری در پاس دادن myName نخواهیم داشت (اگر required را روی true نگذاریم).
قابلیت دیگر اعتبارسنجی در Vue، خصوصیتی به نام default است. این خصوصیت به ما اجازه می دهد که مقداری پیش فرض و اولیه برای prop خودمان داشته باشیم:
props: { myName: { type: String, default: 'Amir' } }
با این کار prop ما همیشه و به صورت پیش فرض مقدار Roxo را خواهد داشت مگر اینکه مقدار دیگری به آن پاس داده شود اما به نظر شما چرا required را حذف کرده ام؟
حالا به فایل user.vue رفته و myName را پاس نمی دهیم. با پاس ندادن myName برنامه مجبور می شود از مقدار پیش فرض myName استفاده کند:
<app-user-detail></app-user-detail>
با ذخیره این کد و مراجعه به مرورگر، میبینید که رشته rimA (برعکس Amir) نمایش داده می شود. کد را به حالت قبل برگردانید تا خودمان myName را پاس بدهیم.
نکته بعدی این است که اگر type شما object یا array بود، باید از یک تابع برای برگرداندن مقدار آن استفاده می کردید:
props: { myName: { type: Object, default: function() { return { name: "Amir" }; } } }
بدین صورت می توانیم مقدار را پاس بدهیم. البته برای مقادیر primitive (مثل رشته ها، اعداد و بولین ها) نیازی به این کار نیست و می توانید مستقیما خود مقدار را قرار بدهید. در کد بالا مقدار اصلی ما یک رشته است (Amir) بنابراین کار عاقلانه ای نیست که از شکل بالا برای پاس دادن آن استفاده کنیم. من فقط می خواستم شما را با نحوه انجام این کار آشنا کنم.
- نصب و راهاندازی فریمورک 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