
در قسمت قبل با مفاهیم اولیه directive ها آشنا شدیم و همچنین در مورد ۵ متد مختلف در directive ها صحبت کردیم. البته در حال حاضر فایل main.Js ما خالی است و هنوز چیزی را پیکر بندی نکرده ایم بنابراین وارد این فایل می شویم تا از اولین متد به نام bind استفاده کنیم. من تمام آرگومان های این متد را می نویسم اما فعلاً قصد استفاده از آن ها را ندارم. اگر یادتان باشد قرار بود رنگ پس زمینه را برای پاراگراف خود تغییر بدهیم. برای این کار به سادگی می توانیم از طریق el که همان عنصر ما می باشد و سپس خصوصیت style مقدار backgroundColor را به رنگ دلخواه تغییر بدهیم:
import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', { bind(el, binding, vnode) { el.style.backgroundColor = 'green'; } });
برای تست کردن این directive می توانیم به App.vue برویم و از آنجایی که آن را به صورت یک global directive تعریف کرده ایم، می توانیم به صورت مستقیم از آن استفاده کنیم:
<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> <p v-highlight>Color this</p> </div> </div>
با مراجعه به مرورگر متوجه می شوید که رنگ پس زمینه برای پاراگراف بالا به سبز تغییر یافته است. در حال حاضر directive ما هیچ مقداری را دریافت نمیکند بنابراین فقط می تواند هر عنصر را به رنگ سبز در بیاورد. بهتر است آن را طوری کدنویسی کنیم که مقداری را نیز از سمت خودمان قبول کند تا بتوانیم به صورت دستی مشخص کنیم چه رنگی برای هر عنصری اعمال شود.
برای این کار دوباره به main.js می رویم و کد قبلی را کامنت می کنیم. حالا می گوییم:
import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', { bind(el, binding, vnode) { // el.style.backgroundColor = 'green'; el.style.backgroundColor = binding.value; } });
همانطور که گفتم Binding اطلاعاتی را در رابطه به directive به ما می دهد (اینجا v-highlight). زمانی که value را از دستور bind میخواهیم یعنی مقدار پاس داده شده به directive را درخواست کرده ایم که معمولاً به صورت double quotation پاس داده می شود. بنابراین می توانیم به فایل app.vue برگردیم و مقدار رنگ مورد نظر خود را به directive پاس بدهیم:
<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> <p v-highlight="'red'">Color this</p> </div> </div>
توجه کنید که مقدار پاس داده شده حتما رشته باشد (کد بالا). فرض کنید بخواهیم directive خود را پیشرفته تر کنیم مثلاً من در اینجا می خواهم کاری کنم که کاربر تعیین کند رنگ جدید، رنگ متن باشد یا رنگ پس زمینه ی متن. اگر کاربر به صراحت مشخص نکند که رنگ داده شده برای متن یا پس زمینه آن است، directive ما به صورت پیش فرض رنگ جدید را برای پس زمینه انتخاب می کنند و اگر کاربر مشخص کرد که رنگ جدید متعلق به متن است، directive ما به این دستورالعمل واکنش نشان خواهد داد.
import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', { bind(el, binding, vnode) { // el.style.backgroundColor = 'green'; if (binding.arg == 'background') { el.style.backgroundColor = binding.value; } else { el.style.color = binding.value; } } });
Arg مخفف همان Argument (آرگومان) است. اگر یادتان باشد ساختار directive ها در Vue بدین شکل بود:
v-name:arg=”value”
البته اگر بخواهید از modifier ها نیز استفاده کنید ساختار زیر را خواهیم داشت:
v-name:arg.modifier=”value”
بنابراین کد بالا این موضوع را چک می کند و بر اساس شرط If خود مقدار را تعیین خواهد کرد. از آنجایی که کد بالا ساده است توضیحات بیشتری نمی دهم. حالا به App.vue می رویم و arg را پاس می دهیم:
<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> <p v-highlight:background="'red'">Color this</p> </div> </div>
با این کار (پاس دادن آرگومان) می توانیم رنگ پس زمینه را مشخص کنیم (می توانید در مرورگر تست کنید) اما اگر آن را حذف کنیم:
<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> <p v-highlight="'red'">Color this</p> </div> </div>
حالا رنگ خود متن (نه پس زمینه) تغییر می کند.
سوال بعدی اینجاست که چطور از modifier ها استفاده کنیم؟ فرض کنید بخواهیم یک modifier تعریف کنیم که کارش به تاخیر انداختن تغییرات استایل باشد. یعنی بعد از باگذاری صفحه، چند ثانیه صبر کنیم و سپس رنگ متن یا پس زمینه تغییر کند. من نام این modifier فرضی را Delayed می گذارم و می گویم:
<p v-highlight:background.delayed="'red'">Color this</p>
ما باید به فایل main.js برویم و این modifier را تعریف کنیم:
import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', { bind(el, binding, vnode) { // el.style.backgroundColor = 'green'; var delay = 0; if (binding.modifiers['delayed']) { delay = 3000; } } });
من در ابتدا متغیری به نام delay را تعریف کرده و آن را روی صفر می گذارم. یعنی در حالت پیش فرض هیچ تاخیری نخواهیم داشت. سپس با یک شرط if چک می کنیم که آیا modifier ما پاس داده شده است یا خیر. توجه کنید که mododfiers یک آرایه است که شامل تمام modifier های پاس داده شده می شود بنابراین می توانیم با استفاده از آن چک کنیم که آیا modifier ای پاس داده شده است یا خیر. اگر پاس داده شده بود، مقدار متغیر delay را روی 3000 میلی ثانیه می گذاریم.
حالا شرط قدیمی خود را درون تابع setTimeout تعریف می کنیم تا این تغییرات بر اساس آن اعمال شوند:
Vue.directive('highlight', { bind(el, binding, vnode) { // el.style.backgroundColor = 'green'; // el.style.backgroundColor = binding.value; var delay = 0; if (binding.modifiers['delayed']) { delay = 3000; } setTimeout(() => { if (binding.arg == 'background') { el.style.backgroundColor = binding.value; } else { el.style.color = binding.value; } }, delay); } });
شما می توانید کد بالا را ذخیره کرده و آن را در مرورگر تست کنید. اگر delayed را پاس داده باشید، رنگ قرمز با 3 ثانیه تاخیر اعمال می شود اما اگر delayed ای نباشد، بدون وقفه اعمال خواهد شد. همچنین توجه داشته باشید که می توانید چندین modifier را نیز به هم زنجیره کنید. مثال:
<p v-highlight:background.delayed.anotherModifier="'red'">Color this</p>
در قسمت بعدی در مورد local directives (directive های محلی) صحبت می کنیم چرا که تا این قسمت فقط از directive های سراسری استفاده کرده ایم. همچنین یک directive پیشرفته تر را نیز با هم خواهیم ساخت.
- نصب و راهاندازی فریمورک 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
سلام من واقعا لذت میبرم از این همه مطالبی که دارید فقط یه سوال داشتم راستش در رابطه با برنامه نویسی ویژوئال استدیو هست چجوری میتونم وقتی رویه باتون کلیک میکنم فیلم پخش بشه چه کدی باید بنویسم اصلا میشه با این برنامه خیلی ممنون میشم کمکم کنید من تازه دارم یاد میگیرم برنامه نویسی رو. ممنون میشم کمکم کنید