
تا این قسمت زمانی که به رفتار خاصی خاصی نیاز داشتیم کامپوننتی را تعریف می کردیم اما از این قسمت به بعد مبحث جدیدی به نام directive ها می شویم البته قبلاً با directive ها آشنا شدیم و چندین بار از آنها استفاده کردهایم: دستوراتی مانند v-if و v-on همگی directive هستند اما تفاوت این فصل با فصل های قبل در پرداختن به جزئیات directive ها است. تفاوت directive و ساخت یک کامپوننت جدید در این است که برخی اوقات نیاز به ساخت یک کامپوننت کامل نداریم بلکه نیاز است تغییرات کوچکی را روی یکی از عناصر DOM ایجاد کنیم. در چنین مواقعی باید از directive ها استفاده کنیم تا کارمان ساده شود. بنابراین این فصل را به یادگیری directive ها و تعریف directive های شخصی خودمان اختصاص داده ام.
برای شروع این فصل جدید کدهایی را برایتان آماده کرده ام که باید آن ها را از این لینک دانلود کنید. همانطور که می بینید فایل App.vue خالی است. من کدهای زیر را به شما می دهم تا درون این فایل بگذارید:
1 2 3 4 5 6 7 8 9 |
<template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Built-in Directives</h1> </div> </div> </div> </template> |
این کدها فقط کدهای ساده HTML است (با بوت استرپ) تا ظاهر برنامه بهتر شود. در مرحله اول می خواهم به directive های پیش فرض درون خود فریم ورک Vue بپردازدیم. قبل از این جلسه با انواع مختلفی از این directive ها آشنا شده بودیم (به طور مثال v-if و v-on). ساختار تمام directive ها در Vue به صورت -v و سپس نام آن directive می باشد. با اینکه بسیاری از directive ها را مورد بررسی قرار داده ایم اما جهت یادآوری، چند مورد دیگر از این directive ها را بررسی می کنیم تا با ساختار کلی آن ها آشنا شویم.
اولین directive ما در این جلسه v-text است:
1 2 3 4 |
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Built-in Directives</h1> <p v-text="'Some Text'"></p> </div> |
این directive به ما اجازه می دهد که متنی را به یک عنصر متصل کنیم. توجه کنید که حتما باید از single quotation استفاده کنید تا Vue بفهمد یک رشته را به آن پاس داده اید، در غیر این صورت سعی می کند some text را به صورت کد (مثلا یک تابع یا expression) اجرا کند که باعث خطا می شود.
Directive بعدی ما v-html است:
1 2 3 4 5 |
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Built-in Directives</h1> <p v-text="'Some Text'"></p> <p v-html="'<strong>some strong text</strong>'"></p> </div> |
این directive به ما اجازه می دهد که به جای نمایش متن خالی، بتوانیم از عناصر HTML نیز در آن استفاده کنیم. هنگام استفاده از دستور v-html باید بسیار مراقب باشید. به طور مثال اگر قرار است محتوایی را از کاربر دریافت کرده و در صفحه نمایش دهید، حتماً باید آن را پاک سازی کنید چرا که بسیاری از حملات XSS به همین صورت اتفاق میافتند. یعنی کاربر کدهای مخربی را برای شما ارسال کرده (مانند تگ های script) و شما نیز بدون توجه به اعتبار سنجی و پاکسازی داده ها آنها را با v-html در صفحه نمایش می دهید.
حال به سراغ تعریف کردن directive های خودمان می رویم. در ابتدا کد زیر را در تگ های template در app.vue کپی کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Built-in Directives</h1> <p v-text="'Some Text'"></p> <p v-html="'<strong>some strong text</strong>'"></p> </div> </div> <hr /> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Custom Directives</h1> </div> </div> </div> </template> |
اولین directive ای که قرار است تعریف کنیم مربوط به کار ساده ای مثل رنگی کردن یک پاراگراف است. به طور مثال تصور کنید که یک پاراگراف داشته باشیم و بخواهیم با استفاده از یک directive رنگ پس زمینه آن را تغییر بدهیم. البته همه می دانیم که این کار با استفاده از attribute های ساده style نیز قابل انجام است اما هدف من در این قسمت یادگیری تعریف directive ها است. برای تعریف یک directive چند روش وجود دارد که اولین روش تعریف آنها به صورت سراسری یا همان global می باشد. برای این کار باید وارد فایل main.js شده و به شکل زیر عمل کنیم:
1 2 3 4 5 6 7 8 9 10 11 |
import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', { }); new Vue({ el: '#app', render: h => h(App) }) |
یعنی باید متد Vue.directive را صدا بزنیم که دو آرگومان می گیرد. آرگومان اول در این متون مربوط به نام directive است. توجه کنید که نام directive ها باید بدون قسمت -v باشد. آرگومان دوم آن نیز یک شیء جاوا اسکریپت ساده است که تنظیمات این directive را درون خود دارد. سوال اینجاست که چطور چنین شیء ای را کد نویسی کنیم؟
قبل از تکمیل این کد باید بدانیم که directive ها دارای پنج hook (شبیه lifecycle hook ها برای کامپوننت ها) یا به زبان ساده تر پنج متد هستند:
- Bind: به محض دسترسی به عنصر (نوشته شدن directive) این متد اجرا می شود و سه آرگومان دارد:
- El که همان عنصری است که directive روی آن سوار شده است.
- Binding که مربوط به پیکربندی عنصر است (مثلا چه آرگومان هایی را پاس می دهیم، چه modifier هایی را به آن پاس خواهیم داد و غیره).
- Vnode که به node اصلی در virtual DOM اشاره می کند (از این آرگومان به ندرت استفاده می شود).
- Inserted: به محض متصل شدن عنصر به DOM اجرا می شود. البته می توانیم از آن درون bind (هوک اول) نیز استفاده کنیم. این متد نیز همان آرگومان های متد قبلی را می گیرد.
- Update: زمانی که کامپوننت یا عنصر به روز رسانی می شود اما هنوز فرزندان آن به روز رسانی نشده اند. این متد همان آرگومان های قبلی را می گیرد اما در آخر کار یک آرگومان دیگر را نیز به سه آرگومان قبلی اضافه می کند: oldVnode که اشاره به وضعیت عنصر قبل از به روز رسانی می کند.
- ComponentUpdated: زمانی که کامپوننت و فرزندان آن همگی به روز رسانی شده اند. این متد نیز همان 4 آرگومان قبلی را می گیرد.
- Unbind: زمانی که directive حذف می شود. آرگومان های آن نیز همان 3 آرگومان متد اول است.
شما می توانید تمام این موارد را به صورت خلاصه در تصویر زیر مشاهده کنید:

- نصب و راهاندازی فریمورک 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