تعرف على جميع الخيارات المتاحة لك لتصميم مكونات 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:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020