
تا این قسمت مطالب زیادی را راجع به خروجی گرفتن از داده ها و نمایش آن ها در صفحه را یا گرفتیم و می دانیم که از دستوراتی مانند v-on زیاد استفاده خواهیم کرد. مشکل اینجاست که تایپ کردن این موارد کمی طول می کشد (به دلیل اینکه خیلی زیاد از آن ها استفاده می شود). بنابراین قبل از اینکه در مورد استایل دهی صحبت کنیم در مورد روش میانبری برای نوشتن این دستورات بحث می کنیم.
برای خلاصه نویسی event ها می توانید v-on را با یک علامت @ ساده جایگزین کنید!
<button @click="counter++">Increase</button>
برای خلاصه نویسی دستور v-bind نیز می توانید آن را به شکل زیر بنویسید:
<a :href="link">Link</a>
یعنی v-bind حذف شده و فقط علامت دو نقطه باقی می ماند. من در طول دوره از این روش برای کدنویسی استفاده می کنم بنابراین حتما آن را حفظ کنید.
استایل دهی با Vue
یکی دیگر از عملیات های بسیار کاربردی در Vue استایل دهی می باشد. به کدهای زیر نگاه کنید:
کدهای HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <div class="demo"></div> <div class="demo"></div> <div class="demo"></div> </div>
کدهای جاوا اسکرپیت:
new Vue({ el: '#app' })
کدهای CSS:
.demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; }
این کدها برای شروع پروژه این جلسه هستند. شما می توانید خروجی آن را در این صفحه Jsfiddle مشاهده کنید. این کدها چیز خاصی ندارند بلکه 3 div مربعی شکل هستند که با رنگ خاکستری پُر شده اند. من این کدها را به شما داده ام تا از این قسمت به بعد با من جلو بیایید و کدنویسی کنید.
من می خواهم در این جلسه با نحوه اضافه کردن کلاس ها به عناصر HTML آشنا شویم بنابراین سه کلاس CSS دیگر را در کدهای CSS تعریف می کنم:
.demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; }
ما می خواهیم کلاس های red و blue و green را با استفاده از Vue به سه div موجود در کدهای HTML متصل کنیم تا رنگ آن ها را تغییر دهیم. بیایید در ابتدا ساده شروع کنیم. می گوییم اگر روی مربع اول کلیک کردیم، باید کلاس red به آن اضافه شود و اگر دوباره کلیک کردیم، کلاس red از آن گرفته شود. برای این کار ابتدا می گوییم:
new Vue({ el: '#app', data: { attachRed: false } })
خصوصیت attachRed در حالت پیش فرض false است یعنی نمی خواهم در همان ابتدا رنگ قرمز روی مربع من اعمال شود. حالا در کدهای HTML می گوییم:
<div id="app"> <div class="demo" @click="attachRed= !attachRed"></div> <div class="demo"></div> <div class="demo"></div> </div>
همانطور که قبلا هم گفتیم حتما لازم نیست که همیشه نام تابعی را به event ها پاس بدهید بلکه می توانید کدهای خود را به صورت دستی (مانند کد بالا) بنویسید. این کد می گوید attachRed را در هنگام کلیک شدن، دقیقا برعکس حالت فعلی خود تنظیم کن. علامت ! یعنی برعکس حالت یا چیزی.
حالا برای اینکه بتوانیم کلاس CSS ای را به صورت مشروط (بر اساس شرطی خاص) به عنصری اضافه کنیم باید آن را به خصوصیت رزرو شده class در Vue متصل کنیم (یعنی bind کنیم). بنابراین:
<div id="app"> <div class="demo" @click="attachRed= !attachRed" :class="{red: attachRed}"></div> <div class="demo"></div> <div class="demo"></div> </div>
همانطور می بینید مقداری که به خصوصیت class پاس داده می شود باید یک شیء جاوا اسکریپتی باشد (الزامات Vue) که نام کلاس مورد نظر را به صورت نام خصوصیت بگیرد. به عنوان مقدار این خصوصیت نیز باید یا true یا false پاس داده شود به طوری که true یعنی این کلاس را متصل کن و false یعنی متصل نکن. من attachRed را پاس داده ام که یک خصوصیت در Data بود و در حالت پیش فرض روی false تنظیم شده است.
نکته: اگر نام کلاس شما دارای کاراکترهای خاص مانند خط فاصله بود باید نام خصوصیت پاس داده شده به class را حتما درون single quotation بگذارید:
<div class="demo" @click="attachRed= !attachRed" :class="{'my-red': attachRed}"></div>
شما می توانید خروجی کد بالا را در این صفحه Jsfiddle مشاهده کنید. با کلیک کردن روی مربع اول، رنگ آن به قرمز تغییر کرده و با کلیک دوباره، به خاکستری برمی گردد.
احتمالا برای شما هم این سوال پیش آمده است که اگر نخواهیم شیء پاس داده شده به class را در کدهای HTML بنویسیم باید چه کار کنیم؟ پروژه ما در حال حاضر بسیار ساده است بنابراین جای نگرانی نیست اما در پروژه های بزرگ تر این شیء بسیار بزرگ و شلوغ خواهد شد. حتی اگر یک خط کد دیگر اضافه کنم هم شلوغ می شود:
<div id="app"> <div class="demo" @click="attachRed= !attachRed" :class="{red: attachRed, blue: !attachRed}"></div> <div class="demo"></div> <div class="demo"></div> </div>
من در اینجا گفته ام اگر attachRed برابر False بود رنگ آبی را برای مربع انتخاب کن. همین کد ساده باعث شلوغ تر شدن کار ما شده است. برای حل این مشکل می توانیم از computed استفاده کنیم:
new Vue({ el: '#app', data: { attachRed: false }, computed: { divClasses: function () { return { red: this.attachRed, blue: !this.attachRed } } } })
از آنجایی که کار ما به خصوصیت attachRed و تغییر آن وابسته است باید از computed استفاده نماییم. همچنین می دانیم که تمام خصوصیات computed یک تابع هستند بنابراین آن را در قالب یک تابع تعریف می کنیم که شیء مورد نظر ما را به ما برمی گرداند. همچنین یادتان باشد که وقتی درون شیء Vue هستیم باید از کلیدواژه this برای دسترسی به خصوصیات مختلف استفاده کنیم.
در نهایت می توانیم در کدهای HTML از این خصوصیت استفاده کنیم:
<div id="app"> <div class="demo" @click="attachRed= !attachRed" :class="divClasses"></div> <div class="demo"></div> <div class="demo"></div> </div>
حالا کدهای ما به راحتی و بدون خطا کار می کنند!
- نصب و راهاندازی فریمورک 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
بسیار عالی و شیوا
لطفا ادامه بدید.
سپاس از شما