
به فصل جدید خوش آمدید. در این فصل می خواهیم نگاهی تئوری تر به Vue داشته باشیم و شیء Vue را به طور مفصل بررسی کنیم. متوجه هستم که اکثر شما از مباحث تئوری خوشتان نمی آید اما این مباحث درک عمیقی را نسبت به نحوه کار Vue در پشت پرده به شما خواهد داد و در کل توسعه دهنده بهتری از شما می سازد بنابراین سعی کنید تا حد امکان چند ویدیوی کوتاه این فصل را مرور کنید.
برای این جلسه کدهای ساده ای را برایتان آماده کرده ام. برنامه ای که فقط یک button دارد و با فشردن آن یک پاراگراف نمایش داده می شود. کدهای HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <h1 ref="heading">{{ title }}</h1> <button v-on:click="show">Show Paragraph</button> <p v-if="showParagraph">This is not always visible</p> </div>
کدهای جاوا اسکریپت:
new Vue({ el: '#app', data: { title: 'The VueJS Instance', showParagraph: false }, methods: { show: function() { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); }, updateTitle: function(title) { this.title = title; } }, computed: { lowercaseTitle: function() { return this.title.toLowerCase(); } }, watch: { title: function(value) { alert('Title changed, new value: ' + value); } } });
در قسمت data یک خصوصیت به نام title داریم که همان عنوان صفحه ما است و اگر کدهای بالا را اجرا کنید این عنوان را مشاهده خواهید کرد. سپس با v-on یک دکمه را به متد show متصل کرده ایم. همچنین یک v-if را روی پاراگراف گذاشته ام که به صورت مشروط نمایش داده شود. اگر به متد show نگاه کنید، متوجه می شوید که در ابتدا خصوصیت showParagraph را روی true می گذارد و سپس متدی را به نام updateTitle را صدا می زند. این متد فقط title صفحه ما را تغییر می دهد. همچنین در قسمت Watch خصوصیت title را زیر نظر گرفته ایم بنابراین هر زمان که عنوان صفحه تغییر کند یک alert به ما نمایش داده می شود. نهایتا یک خصوصیت computed نیز داریم که مشاهده می کنید (title را با حروف کوچک برمی گرداند).
در کد بالا چهار خصوصیت (property) از شیء Vue را مشاهده می کنید:
- el
- data
- methods
- computed
یادتان نرود که شیء Vue نهایتا یک شیء جاوا اسکریپتی است بنابراین دارای خصوصیات (property) و متد (method) است. هر چهار موردی که بالاتر گفتم از خصوصیات این شیء می باشند. حتی methods یک خصوصیت است که درون خودش (به عنوان مقدارِ خصوصیت) متد هایی را ذخیره کرده است.
ما با تمام این مسائل تا حدی آشنا شدیم اما دو سوال اصلی بدون پاسخ مانده است:
- آیا می توانیم چند نمونه از شیء Vue را داشته باشیم؟
- آیا می توانیم در کدهای جاوا اسکریپت اما خارج از شیء Vue، به آن دسترسی داشته باشیم؟
برای بررسی سوال اول می توانیم کدهای HTML خود را به دو div به شکل زیر تقسیم کنیم:
<div id="app1"> <h1 ref="heading">{{ title }}</h1> <button v-on:click="show">Show Paragraph</button> <p v-if="showParagraph">This is not always visible</p> </div> <div id="app2"> <h1 ref="heading">{{ title }}</h1> </div>
همانطور که می بینید id اصلی برنامه که app بود را روی app1 گذاشته ام و سپس یک کپی با آیدی app2 از آن ایجاد کرده ام. حالا به کدهای جاوا اسکریپت بروید و el را مطابق با این تغییر، ویرایش کنید:
new Vue({ el: '#app1', data: { // بقیه کدها //
حالا خارج از این شیء Vue، یک شیء دیگر به شکل زیر می سازیم (من تمام کدها را قرار می دهم تا متوجه شوید منظورم از «خارج از شیء Vue» چیست):
new Vue({ el: '#app1', data: { title: 'The VueJS Instance', showParagraph: false }, methods: { show: function() { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); }, updateTitle: function(title) { this.title = title; } }, computed: { lowercaseTitle: function() { return this.title.toLowerCase(); } }, watch: { title: function(value) { alert('Title changed, new value: ' + value); } } }); new Vue ({ el: '#app2', data: { title: 'The second instance' } });
همانطور که می بینید در کد بالا دو شیء مختلف یا دو نمونه مختلف از کلاس Vue داریم. آیا انجام این کار مشکلی دارد؟ خیر، شما می توانید هر زمانی که خواستید چندین نمونه از شیء Vue را ایجاد کنید.
نکته: دو نمونه مختلف از شیء Vue هیچ ربطی به هم ندارند بنابراین زمانی که در شیء اول از this.title استفاده می کنید، فقط به خصوصیت title درون همان شیء اول اشاره خواهید کرد و هیچ ارتباطی با شیء دوم نخواهید داشت. راه میانبری برای صدا زدن یک متد از یک شیء Vue درون یک شیء دیگر Vue وجود دارد اما به هیچ وجه توصیه نمی شود؛ اگر بین دو شیء Vue شما ارتباطی وجود دارد، آن ها را ادغام کنید.
احتمالا کنجکاو هستید که چطور می توانیم به کدهای یک شیء Vue خارج از آن دسترسی پیدا کنیم (مثلا در یک Vue دیگر). در ابتدا زمانی که یک شیء Vue می سازید باید آن را درون یک متغیر قرار بدهید. مثلا:
var vm1 = new Vue({ el: '#app1', data: { title: 'The VueJS Instance', showParagraph: false }, // بقیه کدها //
این کار را روی نمونه دوم Vue نیز انجام می دهیم:
var vm2 = new Vue ({ el: '#app2', data: { title: 'The second instance' } });
حالا یک دکمه را برای app2 تعریف می کنم تا با کلیک روی آن چیزی در app1 تغییر کند. به کدهای HTML من نگاه کنید:
<div id="app2"> <h1 ref="heading">{{ title }}</h1> <button @click="onChange">Change something in Vue 1</button> </div>
من هیچ چیزی را تغییر ندادم به جز اینکه یک button اضافه کرده ام که در صورت کلیک شدن متدی به نام onChange را اجرا خواهد کرد. این متد تعریف نشده است بنابراین به کدهای جاوا اسکریپت می روم و onChange را درون App2 تعریف می کنم:
var vm2 = new Vue ({ el: '#app2', data: { title: 'The second instance' }, methods: { onChange: function () { vm1.title = 'Changed!'; } } });
به نظر شما کد بالا کار می کند؟ بله! یادتان باشد که vm1 همان متغیری است که نمونه اول Vue را در خود ذخیره دارد. مسئله کار کردن یا نکردن کد نیست، مسئله اینجاست که اگر واقعا این دو نمونه از کلاس Vue به هم مرتبط هستند، نیازی به جدا کردن آن ها و ایجاد دردسر برای خودتان نیست. همیشه توصیه می شود که شیء های Vue شما از یکدیگر کاملا مستقل باشند.
در ضمن نیازی نیست که حتما از یک شیء دیگر Vue به آن دسترسی پیدا کنیم. بلکه می توانیم با کدهای ساده جاوا اسکریپت نیز این کار را انجام بدهیم:
watch: { title: function(value) { // کدهای مربوط به شیء اول ویو alert('Title changed, new value: ' + value); } } }); // کدهای ساده جاوا اسکریپتی، خارج از هر دو شیء setTimeout (function () { vm1.title = 'Changed by timer'; }, 3000) // کدهای مربوط به شیء دوم ویو var vm2 = new Vue ({ el: '#app2', data: { title: 'The second instance' }, methods: { onChange: function () { vm1.title = 'Changed!'; } } });
حالا اگر 3 ثانیه صبر کنیم، تابع setTimeout اجرا شده و title را تغییر می دهد. بنابراین می توانیم از هر قسمتی از برنامه به شیء های 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