تصميم مكونات Vue.js باستخدام CSS

تعرف على جميع الخيارات المتاحة لك لتصميم مكونات Vue.js باستخدام CSS

ملاحظة: يستخدم هذا البرنامج التعليمي Vue.js Single File Components

إن أبسط خيار لإضافة CSS إلى مكون Vue.js هو استخدام ملحقstyleعلامة ، تمامًا كما في HTML:

<template>
  <p style="text-decoration: underline">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: ‘underline’
}
}
}
</script>

هذا ثابت بقدر ما يمكنك الحصول عليه. ماذا لو أردتunderlineليتم تعريفها في البيانات المكونة؟ إليك كيف يمكنك القيام بذلك:

<template>
  <p :style="{'text-decoration': decoration}">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: ‘underline’
}
}
}
</script>

:styleهو اختصار لv-bind:style. سأستخدم هذا الاختصار خلال هذا البرنامج التعليمي.

لاحظ كيف كان علينا أن نلتفtext-decorationفي اقتباسات. هذا بسبب الشرطة ، وهي ليست جزءًا من معرف JavaScript صالح.

يمكنك تجنب الاقتباس باستخدام صيغة حالة الجمل الخاصة التي يتيحها Vue.js ، وإعادة كتابتها إلىtextDecoration:

<template>
  <p :style="{textDecoration: decoration}">Hi!</p>
</template>

بدلاً من ربط كائن بـstyle، يمكنك الإشارة إلى خاصية محسوبة:

<template>
  <p :style="styling">Hi!</p>
</template>
<script>
export default {
data() {
return {
textDecoration: ‘underline’,
textWeight: ‘bold’
}
},
computed: {
styling: function() {
return {
textDecoration: this.textDecoration,
textWeight: this.textWeight
}
}
}
}
</script>

تُنشئ مكونات Vue HTML عاديًا ، بحيث يمكنك اختيار إضافة فئة إلى كل عنصر ، وإضافة محدد CSS مقابل مع الخصائص التي تحدد النمط:

<template>
  <p class="underline">Hi!</p>
</template>
<style>
.underline { text-decoration: underline; }
</style>

يمكنك استخدام SCSS مثل هذا:

<template>
  <p class="underline">Hi!</p>
</template>
<style lang=“scss”>
body {
.underline { text-decoration: underline; }
}
</style>

يمكنك ترميز الفئة كما في المثال أعلاه ، أو يمكنك ربط الفئة بخاصية مكون ، لجعلها ديناميكية ، ولا تنطبق إلا على تلك الفئة إذا كانت خاصية البيانات صحيحة:

<template>
  <p :class="{underline: isUnderlined}">Hi!</p>
</template>
<script>
export default {
data() {
return {
isUnderlined: true
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
</style>

بدلاً من ربط كائن بالفئة ، كما فعلنا مع<p :class="{text: isText}">Hi!</p>، يمكنك ربط سلسلة مباشرة ، وسيشير ذلك إلى خاصية البيانات:

<template>
  <p :class="paragraphClass">Hi!</p>
</template>
<script>
export default {
data() {
return {
paragraphClass: ‘underline’
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
</style>

يمكنك تعيين فئات متعددة إما بإضافة فئتين إلىparagraphClassفي هذه الحالة أو باستخدام مصفوفة:

<template>
  <p :class="[decoration, weight]">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: ‘underline’,
weight: ‘weight’,
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

يمكن القيام بالشيء نفسه باستخدام كائن مضمن في ربط الفئة:

<template>
  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
</template>
<script>
export default {
data() {
return {
isUnderlined: true,
isBold: true
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

ويمكنك الجمع بين العبارتين:

<template>
  <p :class="[decoration, {weight: isBold}]">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: ‘underline’,
isBold: true
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

يمكنك أيضًا استخدام خاصية محسوبة تقوم بإرجاع كائن ، والتي تعمل بشكل أفضل عندما يكون لديك العديد من فئات CSS لإضافتها إلى نفس العنصر:

<template>
  <p :class="paragraphClasses">Hi!</p>
</template>
<script>
export default {
data() {
return {
isUnderlined: true,
isBold: true
}
},
computed: {
paragraphClasses: function() {
return {
underlined: this.isUnderlined,
bold: this.isBold
}
}
}
}
</script>
<style>
.underlined { text-decoration: underline; }
.bold { font-weight: bold; }
</style>

لاحظ أنه في الخاصية المحسوبة تحتاج إلى الرجوع إلى بيانات المكون باستخدامthis.[propertyName]، بينما يتم وضع خصائص البيانات في القالب بشكل ملائم كخصائص من المستوى الأول.

أي CSS غير مشفر كما في المثال الأول ستتم معالجته بواسطة Vue ، ويقوم Vue بعمل رائع يتمثل في إضافة CSS تلقائيًا لنا ، لذلك يمكننا كتابة CSS نظيف مع الاستمرار في استهداف المتصفحات القديمة (والذي لا يزال يعني المتصفحات التي Vue يدعم ، لذلك IE9 +)

تحميل مجانيكتيب Vue

تصميم مكونات Vue.js باستخدام CSS

تعرف على جميع الخيارات المتاحة لك لتصميم مكونات Vue.js باستخدام CSS

المزيد من دروس vue: