جلسه پنجم: کلاس‌ها و استایل‌های اتصالات در Vue.js

تا به اینجای کار در طی چهار جلسه آموزشهای مقدماتی در ارتباط با فریم ورک قدرتمند Vue.js در اختیار شما قرار گرفت. در جلسه اول با مفاهیم مقدماتی و معرفی اولیه این فریم ورک در خدمت شما بودیم. جلسه دوم به اختصار مفاهیم شیءگرایی و نمونه‌برداری از اشیاء ساخته شده شرح داده شد. جلسه سوم را به توضیح مفصل نحوه درج متون، عبارتها و دستورهای Vue.js پرداختیم و در نهایت در جلسه چهارم به بررسی دقیق مفاهیم ویژگی‌های بسیار کاربردی Computed و Watch اشاره کردیم. حال در این جلسه با مفاهیم دارای سطح آموزشی متوسط در خدمت شما خواهیم بود.

اکثر مواقع به یک روش برای اتصال داده‌ها به فرم‌ها و .. نیاز داریم تا بتوانیم یک سری عملیات خاص را برای یک لیست کلاس و استایل درون آن اجرا کنیم. بنابراین هر دو این موارد، یعنی استایل‌ها و کلاس‌ها به عنوان صفت مورد استفاده قرار می‌گیرند. برای استفاده از آنها می‌توان عبارت v-bind را بکار برد. در اینجا ما نیاز داریم که تنها یک رشته‌ی خروجی محاسبه‌شده را بدون عبارتهای محاسباتی به نمایش بگذاریم. برای این کار، Vue.js ابزارهای بسیاری را برای دسترسی به این هدف ایجاد کرده است. بنابراین با استفاده از v-bind به همراه class و style می‌توانیم به این مهم دست پیدا کنیم. علاوه بر رشته‌ها، عبارتها می‌توانند تحت عنوان آرایه‌ها و یا اشیاء مورد بررسی قرار بگیرند.

اتصالات کلاس‌های HTML با ساختار شیءگرایی

می‌توان یک شیء را به v-bind:class به صورت پویا ارسال کرد. به مثال زیر توجه کنید:

<div v-bind:class="{ active: isActive }"></div>

ساختار مثال بالا کلاس active را نشان می‌دهد که تحت شرایط ویژگی داده isActive مقداردهی می‌شود.

در نظر داشته باشید، می‌توان به صورت همزمان از چندین کلاس استفاده کرد. برای اینکار تنها کافیست دستور v-bind:class را به صورت زیر بازنویسی کنید:

<div class="static" v-bind:class="{ active: isActive, 'text-danger':hasError }">
</div>

و متناسب با داده‌های بالا داریم:

data: {
	isActive: true,
	hasError: false
}

در انتهای این مثال خروجی زیر نمایش داده خواهد شد:

<div class="static active"></div>

هنگامیکه عبارت isActive یا hasError تغییر کند، لیست کلاس‌ها بروزرسانی می‌شود. به عنوان مثال اگر hasError برابر ture باشد، لیست کلاس‌ها به صورت "static active text-danger" خواهد بود.

همچنین می‌توان از اشیاء برای ارسال اطلاعات به کلاس استفاده کرد:

<div v-bind:class = "classObject" ></div>

data: {
	classObject: {
		active: true,
		'text-danger': false
	}
}

نتیجه کد بالا با مثال قبلی یکسان خواهد بود. همچنین می‌توان از ویژگی Computed برای اتصال اطلاعات به کلاس‌ها استفاده کرد. زیرا ویژگی‌های Computed یک شیء را بر می‌گردانند. به مثال زیر توجه کنید:

data: {
	isActive: ture,
	error: null
}
computed: {
	classObject: function(){
		return{
			active: this.isActive && !this.error
			'text-danger': this.error && this.error.type === 'fatal',
		}
	}
}

اتصالات کلاس‌های HTML با ساختار آرایه

می‌توان یک آرایه را برای نمایش لیست کلاس‌ها به v-bind:class ارسال کرد. به مثال زیر توجه کنید:

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
	activeClass: 'active',
	errorClass: 'text-danger'
}

خروجی کد بالا مشابه کد زیر خواهد بود:

<div class="active text-danger"></div>

همچنین می‌توان کلاس بالا را به صورت شرطی نوشت تا در صورت وجود خطا مقدار کلاس‌ها تغییر کند. به نمونه زیر توجه کنید:

<div v-bind:class="[isActive ? activeClass: '', errorClass]"></div>

با توجه به گستردگی فریم ورک قدرتمند Vue.js می‌توان ساختار اشیاء را درون ساختار کلاس‌ها استفاده کرد. که در صورت با مثال زیر مواجه خواهیم شد:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

اتصالات کلاس‌های HTML با کامپوننت‌ها (v-bind with component)

توجه: در این بخش فرض کرده‌ایم شما با کامپوننت‌های Vue.js آشنایی کامل دارید. اگر نیاز به آموزش بخش کامپوننت‌های Vue.js دارید یا از طریق این لینک، آن را مطالعه کنید یا این بخش را رد کرده و بعدا به آن مراجعه کنید.

هنگامیکه یک کلاس درون یک کامپوننت دلخواه تعریف می‌کنید، آن کلاس به سایر المان‌های اصلی کامپوننت اضافه خواهد شد. توجه داشته باشید که این کلاس روی کلاس‌های اصلی کپی و جایگزین نمی‌شوند. برای نمونه به مثال زیر توجه کنید:

در این مثال یک کامپوننت تعریف کرده‌ایم:

Vue.component('roxo-component', {
	template: '<p class="roxoApp roxoMain"></p>'
})

سپس هنگام بکارگیری این کامپوننت یک کلاس به آن اضافه می‌کنیم:

<roxo-component class="myRoxo"></roxo-component>

در نهایت خروجی این نمونه به صورت زیر خواهد بود:

<p class="roxoApp roxoMain myRoxo">یک پاراگراف تست می‌نویسیم</p>

این موضوع برای کلاس‌های متصل شده به کامپوننت‌ها با استفاده از v-bind:class نیز صادق است:

<roxo-component v-bind:class="{ active: isActive }"><roxo-component>

هنگامیکه مقدار isActive صحیح باشد، خروجی کد بالا به صورت زیر خواهد بود:

<p class="roxoApp roxoMain isActive">یک متن برای تست مینویسیم</div>

اتصالات درون استایل‌ها (Styles) با ساختار شیءگرایی

ساختار اشیاء برای v-bind:style یا همان اتصالات درون استایل‌ها بسیار زیبا و ساده است. این ساختار بسیار شبیه به زبان CSS می‌باشد با این تفاوت که آنها JavaScript هستند. شما می‌توانید ویژگی‌های CSSای را به صورت camelCase 0 یا kebab-case نام‌گذاری گنید. به مثال ذیل توجه بفرمایید:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
	activeColor: 'red',
	fontSize: 30
}

در اکثر مواقع برای زیباتر شدن ظاهر نوشتاری کدها از شیء برای معرفی استایل‌ها استفاده می‌کنند که در اینصورت خواهیم داشت:

<div v-bind:style="styleObject"></div>

data:{
	styleObject: {
		color: 'red',
		fontSize: '30px'
	}
}

مجددا تاکید می‌کنیم، استفاده از ساختار شیء داخل v-bind:style در اغلب موارد در ویژگی‌های Computed به کار گرفته می‌شود. زیرا ویژگی‌های Computed یک شیء را باز می‌گردانند.

اتصالات درون استایل‌ها (Styles) با ساختار آرایه‌ها

ساختار آرایه‌ها برای اتصالات درون استایل‌ها دقیقا مشابه ساختار آرایه‌های برای اتصالات کلاس‌ها درون v-bind:class است. بنابراین برای v-bind:style می‌توان چندین استایل را تعریف کرد. به کد زیر توجه کنید:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

اگر شما یک ویژگی CSS به v-bind:style اضافه کنید، به عنوان مثال ویژگی transform، فریم‌ورک Vue به صورت خودکار و اتوماتیک پیشوند متناسب با آن ویژگی را اضافه خواهد کرد.

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.