
تا این قسمت درباره گزینه های مختلفی برای شیء Vue صحبت کرده ایم که به طور خلاصه عبارت اند از:
- el: متصل کردن شیء به DOM.
- data: ذخیره اطلاعاتی که بعدا استفاده خواهند شد.
- methods: متدهایی که به آن ها نیاز داریم.
- computed: وابستگی ها (خصوصیات وابسته).
در این جلسه می خواهیم با خصوصیت جدیدی به نام watch (در اینجا به معنای «زیر نظر گرفتن») آشنا شویم که به نوعی یک جایگزین برای computed محسوب می شود. کار اصلی watch اجرای کدهای خاص در هنگام تغییر داده ها است. در Computed ما خصوصیات خودمان را مانند data تعریف می کردیم، البته منطق آن را درون یک تابع قرار می دادیم اما watch نام خصوصیت را دریافت کرده و آن را زیر نظر می گیرد. مثلا:
new Vue({ el: '#app', data: { counter: 0, secondCounter: 0 }, computed: { output: function () { console.log('Computed'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } }, watch: { counter: function (value) { } }, methods: { result: function () { console.log('Method'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
همانطور که گفتم در Watch باید نام یکی از خصوصیات خود را پاس بدهید. من counter را انتخاب کرده ام (نام خصوصیت درون watch دقیقا باید مانند نام آن در data باشد). Value نیز مقدار تغییری است که قرار است در آینده ایجاد شود و به صورت خودکار توسط Vue به ما پاس داده می شود. بنابراین خلاصه Watch این است که ما خصوصیتی را زیر نظر می گیریم و در صورتی که تغییر کرد، تابع مربوط به آن در watch اجرا خواهد شد. Value نیز مقدار تغییر کرده (پس از ایجاد تغییر) می باشد. ما می توانیم کارهای زیادی را در این تابع انجام دهیم. به طور مثال می توانیم خصوصیت output را به جای تعریف در computed در watch تعریف کنیم.
یکی از مواردی که فقط در watch امکان پذیر است، اجرای کدهای نامتقارن (asynchronous code) است چرا که خصوصیات computed همیشه به صورت متقارن (synchronous) اجرا می شوند. برای اینکه مثالی از watch را داشته باشیم، فرض کنید که بخواهیم counter ما پس از 2 ثانیه دوباره صفر شود. قبل از اینکه این کار را انجام بدهیم باید شما را با مبحث closure در جاوا اسکریپت آشنا کنم. Closure ارتباط خاصی با Vue ندارد و یکی از بحث های عادی جاوا اسکریپت است اما بسیاری از توسعه دهندگان جاوا اسکریپت با آن آشنا نیستند بنابراین بهتر است آن را به صورت خلاصه مرور کنیم.
به کد زیر توجه کنید (من انتظار دارم که با مبحث Scope متغیرها آشنا باشید):
function makeFunc() { var name = 'Mozilla'; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc();
در این کد تابعی به نام makeFunc داریم که متغیری به نام name را تعریف می کند. سپس یک تابع دیگر به نام displayName را تعریف می کند که در نهایت یک پنجره alert را به همراه متغیر name نمایش خواهد داد. همانطور که می دانید متغیرهایی که درون یک تابع تعریف شوند، Scope شان فقط درون تابع است و بیرون از تابع تعریف نشده هستند. از طرفی در بسیاری از زبان های برنامه نویسی این نوع متغیر ها که درون تابع تعریف می شوند فقط تا زمانی وجود دارند که تابع در حال اجرا شدن است و به محض تکمیل شدن اجرای تابع، از بین می روند. بنابراین اگر برنامه نویس خوبی در جاوا اسکریپت نباشید، تصور خواهید کرد که کد بالا اجرا نشده و خطا می دهد در صورتی که این کد بدون مشکل اجرا خواهد شد. چرا؟ به دلیل اینکه توابع در جاوا اسکریپت یک Closure (به معنی «بستار» یا یک محیط بسته) به وجود می آورند.
Closure یعنی توابه جاوا اسکریپت با خصوصیتی پنهان به نام [[Environment]] ایجاد می شوند که به تابع کمک می کند محلِ ساخته شدن خود را به یاد داشته باشد. یعنی تابع displayName می داند که در زمان تعریف شدن، متغیری به نام name در تابع پدر خود وجود داشته است که مقدارش برابر با Mozilla است.
تعریف فنی closure بدین شکل است:
A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. منبع: شبکه توسعه دهندگان موزیلا
ترجمه ساده آن می شود: بستار (closure) به مجموعه یک تابع و محیط آن گفته می شود. این محیط (محیطی که تابع در آن تعریف شده است) شامل تمام متغیر هایی است که در زمان تعریف شدن این تابع، در Scope وجود داشته اند.
حالا به کدهای خودمان برمی گردیم. من می خواهم counter پس از 2 ثانیه دوباره صفر شود بنابراین:
new Vue({ el: '#app', data: { counter: 0, secondCounter: 0 }, computed: { output: function () { console.log('Computed'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } }, watch: { counter: function (value) { var vm = this; setTimeout( function() { vm.counter = 0; }, 2000); } }, methods: { result: function () { console.log('Method'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
اگر یادتان باشد در Vue کلید واژه this به همین شیء this برمی گردد و به ما کمک می کند که بدون صدا زدن this.data.counter یا اشکال دیگر، بگوییم this.counter و کارمان را راحت کنیم. مسئله اینجاست که توابع callback ای مانند setTimeout یک closure به حساب می آیند بنابراین باید کلیدواژه this را در یک متغیر ذخیره کنم تا وقتی درون این closure می رویم، باز هم به آن دسترسی داشته باشیم.
حالا می توانید کدها را اجرا کنید و روی دکمه increase کلیک کنید. هر زمان که کلیک کردن را برای 2 ثانیه متوقف کنید، counter دوباره صفر خواهد شد. چرا؟ به دلیل اینکه counter را در watch گذاشته ایم، بنابراین counter زیر نظر گرفته شده و هر بار که تغییر کند، تابع مربوط به آن در Watch اجرا می شود.
- نصب و راهاندازی فریمورک 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
سلام میشه لطف کنید منبع این اطلاعات رو قرار بدهید سایت vue رفتم ولی با مثال توضیح نداده اگه شد منبع رو هم قرار بدید با تشکر