
تا این قسمت با چند مورد از directive های فریم ورک Vue آشنا شده ایم اما هنوز به درستی نمی دانیم directive ها چه هستند و کارشان چیست. برای درک بهتر directive ها کافی است به نام آن ها توجه کنید. directive به معنای «دستور» یا «بخش نامه» است بنابراین می توان گفت directive ها مجموعه ای از دستورات خاص هستند که در کد ما قرار می گیرند و وظیفه خاصی را انجام می دهند. تعداد این directive ها در هسته Vue آنقدر زیاد نیست چرا که همان تعداد محدود تقریبا تمام کارهای ما را انجام می دهند (البته در قسمت های بعد یاد می گیریم که چطور directive های خودمان را بنویسیم).
اگر از جلسه قبل یادتان باشد چنین directive ای را داشتیم:
<div id="app"> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> </div>
بنابر تعریفی که از directive ها ارائه دادیم می توان گفت v-bind یک دستور است که به vue می گوید مقدار مشخص شده من را به فلان attribute متصل کن (bind کن). از همینجا می توان فهمید که برای پاس دادن آرگومان ها به یک directive باید از علامت دو نقطه (:) استفاده کنیم و سپس نام آن آرگومان را پاس بدهیم.
بگذارید یک مثال دیگر از directive ها بزنیم که برنامه ما را بهینه تر می کند. فرض کنید کد HTML ما به صورت زیر باشد:
<div id="app"> <h1>{{ title }}</h1> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> </div>
اگر یادتان باشد title ما همان رشته hello world بود. حالا کدهای جاوا اسکریپت خودم را نیز به شکل زیر تغییر می دهم:
new Vue({ el: '#app', data: { title: 'Hello World!', link: 'http://google.com' }, methods: { sayHello: function () { this.title = 'Hello!'; return this.title; } } })
یعنی گفته ام که مقدار title برابر با Hello شود (این کد را به غیر از قسمت تعیین title در جلسه قبل نوشته بودیم). اگر کلید Ctrl + Enter را بزنم (البته در jsfiddle) کد من اجرا می شود و خروجی زیر را خواهیم داشت:
Hello!
Hello! – Google
در واقع در همان ابتدا مقدار اولیه title (همان Hello World) برای تگ h1 در نظر گرفته می شود اما زمانی که تابع sayHello اجرا می شود مقدار title را تغییر می دهد و زمانی که title تغییر کند تمام مواردی که title در آن ها استفاده شده باشد نیز re-render می شود (دوباره پردازش و نمایش داده می شوند). سوال اینجاست که اگر بخواهیم مقدار اولیه title را نگه داریم باید چه کار کنیم؟ شاید در برنامه های بزرگ تر یک خصوصیت را چندین بار تغییر دهیم و نخواهیم در همه قسمت های دیگر برنامه شاهد re-render های مختلف باشیم.
اینجاست که Directive جدیدی به نام v-once وارد کار می شود:
<div id="app"> <h1 v-once>{{ title }}</h1> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> </div>
Once به معنی «یک بار» است و از نامش مشخص می شود که کارش چیست. اگر v-once را روی عنصری قرار بدهیم فقط یک بار render می شود و دیگر در آینده به روز رسانی نخواهد شد. اگر کد بالا را اجرا کنیم خروجی زیر را می گیریم:
Hello World!
Hello! – Google
خروجی کد HTML از جاوا اسکریپت
فرض کنید به جای مقداری از یک لینک بخواهیم یک لینک کامل (کد HTML) را نمایش بدهیم. به طور مثال:
new Vue({ el: '#app', data: { title: 'Hello World!', link: 'http://google.com', finishedLink: '<a href="http://google.com">Google</a>' }, methods: { sayHello: function () { this.title = 'Hello!'; return this.title; } } })
شما می توانید در قسمت Data از کدهای HTML نیز استفاده کنید و من هم در خصوصیت finishedLink همین کار را کرده ام. سوال اصلی اینجاست که برای قرار دادن این لینک در صفحه HTML خود باید چه کار کنیم؟ آیا کد زیر صحیح است؟
<div id="app"> <h1 v-once>{{ title }}</h1> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> <hr> <p>{{ finishedLink }}</p> </div>
خروجی کد بالا به شکل زیر است:

همانطور که مشاهده می کنید لینک ما به صورت متن ساده نمایش داده شده است. این یک قابلیت عالی است چرا که ما را از شر حملات XSS دور نگه می دارد. Vue به صورت پیش فرض هیچ کدی را در صفحه ما اجرا نمی کند (چه HTML و چه کدهای دیگر) بنابراین اگر بخواهیم کدهای مورد تایید خودمان را نمایش بدهیم چطور؟ برای چنین حالتی یک directive دیگر به نام v-html وجود دارد که کدهای HTML ما را نمایش می دهد:
<div id="app"> <h1 v-once>{{ title }}</h1> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> <hr> <p v-html="finishedLink"></p> </div>
از آنجایی که آرگومانی نداریم که به این directive پاس بدهیم از علامت دو نقطه خبری نیست و مستقیما مقدار را به آن داده ایم. با قرار دادن v-html روی تگ <p> به Vue گفته ایم که لینک ما باید درون این تگ قرار بگیرد بنابراین کد نهایی HTML در مرورگر به شکل زیر خواهد بود:
<p><a href=”http://google.com”>Google</a></p>
در جلسه بعد وارد بحث event ها و نحوه تعامل با آن ها می شویم.
- نصب و راهاندازی فریمورک 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