
در قسمت قبل در مورد دو خصوصیت شیء Vue صحبت کردیم که el$ و data$ بودند. در این قسمت می خواهم کمی در مورد خصوصیت ref$ توضیح بدهم. این خصوصیت از آن دسته خصوصیت هایی است که بهتر است با دقت فراوان از آن استفاده شود چرا که استفاده نادرست می تواند باعث بهم ریختن برنامه شما بشود. به کد زیر توجه کنید:
<div id="app1"> <h1>{{ title }}</h1> <button v-on:click="show">Show Paragraph</button> <p v-if="showParagraph">This is not always visible</p> </div>
در حال حاضر اگر دسترسی پیدا کردن به محتوای دکمه بالا (منظورم innerHtml است که می شود عبارت show paragraph) آنچنان کار آسانی نیست. اگر از جاوا اسکریپت ساده استفاده می کردیم، گزینه querySelector را داشتیم و می توانستیم از آن استفاده کنیم اما در Vue اینطور نیست. البته همیشه می توانید جاوا اسکریپت ساده را به همراه Vue استفاده کنید اما من می خواهم در این قسمت فقط از Vue استفاده کنم.
در Vue می توانیم از attribute خاصی به نام ref (مخفف reference و به معنی «ارجاع») استفاده کنیم که در HTML معنا ندارد و مخصوص Vue است:
<button v-on:click="show" ref="myButton">Show Paragraph</button>
همانطور که می بینید ref یک رشته دریافت می کند که کاملا سلیقه ای است و شما می توانید هر مقداری را (به شرطی که رشته باشد) در آن قرار دهید. من myButton را انتخاب کرده ام. شما می توانید این کار را برای هر تعداد عنصری که دوست دارید، انجام بدهید. تمام این عناصر با استفاده از همان رشته پاس داده شده در ref قابل «ارجاع» هستند. به طور مثال من می گویم:
var vm1 = new Vue({ el: '#app1', data: data, methods: { show: function () { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); console.log(this.$refs); }, // بقیه کدها //
یعنی زمانی که متد Show اجرا شد، تمام ref های ما چاپ بشود تا آن ها را مشاهده کنیم.

همانطور که مشاهده می کنید، با اجرای این کد (باید روی کلید show paragraph کلیک کنید) یک شیء در کنسول من نمایش داده می شود که با باز کردن آن به تصویر بالا می رسیم. بنابراین myButton از نوع button (دکمه HTML) است (در خط اول نوشته شده است). خصوصیات دیگری نیز در این تصویر وجود دارد که همگی مربوط به دکمه ما است. با این حساب می توان گفت:
show: function () { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); console.log(this.$refs.myButton); }
یعنی می توانیم از مقدار داده شده به Ref به عنوان key برای دسترسی به ref خاص خود استفاده کنیم. بنابراین با تکمیل کردن کد بالا می توان گفت:
show: function () { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); this.$refs.myButton.innerText = 'Test'; }
یعنی با اجرا شدن تابع show باید innerHtml دکمه من به Test تغییر پیدا کند. اگر صفحه را refresh کرده و تابع را اجرا کنید، متن دکمه از show paragraph به Test تغییر پیدا خواهد کرد.
حالا اگر این کار را برای عنصری انجام بدهم که محتوای آن تحت کنترل Vue است چه اتفاقی خواهد افتاد؟ به طور مثال:
<div id="app1"> <h1 ref="heading">{{ title }}</h1> <button v-on:click="show" ref="myButton">Show Paragraph</button> <p v-if="showParagraph">This is not always visible</p> </div>
من ref جدیدی به نام heading را به title پاس داده ام اما محتوای title خودش تحت نظر Vue است. حالا اگر خارج از شیء Vue (برای app1) و قبل از تابع setTimeout مقدار heading را تغییر بدهم چه می شود؟
// کدهای مربوط به اپ یک watch: { title: function (value) { alert('Title changed, new value: ' + value); } } }); // کد تغییر عنوان // vm1.$refs.heading.innerText = 'something else'; تابع تایم اوت setTimeout(function () { vm1.title = 'Changed by timer'; vm1.show(); }, 3000) // کدهای مربوط به اپ دو var vm2 = new Vue({ el: '#app2', data: { title: 'The second instance' },
اگر کدهای بالا را اجرا کنید، عنوان به درستی به something else تغییر می کند اما پس از اجرا شدن setTimeout مقدار آن به The VueJS Instance (Updated) برمی گردد. چرا؟ به دلیل اینکه String interpolation (استفاده از {{ و }} برای نمایش title) باطل و overwrite نمی شود. چرا؟
اگر یادتان باشد به شما گفتم که Vue تغییرات را مستقیما در DOM ایجاد نمی کند بلکه کدهای HTML را گرفته و یک نسخه کپی از کدهای HTML را در حافظه خود نگه می دارد. به همین دلیل است که می توانیم درون کدهای HTML از syntax هایی مانند click@ و ref استفاده کنیم – ما آن ها را واقعا در HTML نمی نویسیم، بلکه کدهای HTML بعدا توسط Vue تولید شده و به کاربر ارائه می شوند. زمانی که ما خارج از Vue و به صورت مستقیم (مانند کد بالا) تغییراتی را برای title ایجاد می کنیم، این تغییرات درون DOM اعمال می شوند اما آن نسخه کپی شده در Vue هیچ تغییری نمی کند. بنابراین نهایتا نسخه کپی Vue جایگزین title می شود.
نکته مهم اینجاست که شما می توانید به صورت مستقیم با عوامل DOM تعامل داشته باشید اما تغییرات شما در نسخه کپی 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