تصميم مكونات 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: