Vue SFC: script وtemplate وstyle
افهم تنسيق المكوّن ذي الملف الواحد: كتلة script للمنطق، وكتلة template للعرض، وكتلة style لتنسيق CSS ذي النطاق المحدد.
Vue SFC: script وtemplate وstyle درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما المقصود بـ Single-File Component؟
مكوّن Vue أحادي الملف (SFC) هو ملف .vue يتضمن ثلاث كتل: <script> لمنطق JavaScript، و<template> لواجهة HTML، و<style> لـ CSS. ويكون كل ما يخص مكوّنًا واحدًا موجودًا في ملف واحد.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>كتلة script
يوضع المنطق والبيانات وعمليات الاستيراد وكود Composition API هنا. ومع <script setup>، تصبح المتغيرات وعمليات الاستيراد المعلنة في المستوى الأعلى متاحة تلقائيًا في القالب.
script setup — النهج الحديث
تُعد <script setup> الصيغة الموصى بها لـ SFC. وتصبح المتغيرات والخصائص المحسوبة والدوال المعلنة فيها متاحة مباشرةً في القالب دون الحاجة إلى إرجاعها صراحةً.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>كتلة template
يحتوي template على واجهة HTML الخاصة بالمكوّن. وتُترجم قوالب Vue إلى دوال تصيير. استخدم السمات والتوجيهات الخاصة بـ Vue (v-if وv-for و@click) داخل القالب.
الاستيفاء في القالب
استخدم القوسين المعقوفين المزدوجين {{ }} لإخراج البيانات التفاعلية كنص. يهرب Vue محارف HTML تلقائيًا — ولتصيير HTML، استخدم التوجيه v-html (بحذر).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>كتلة style
تنطبق CSS الموجودة في كتلة style على المكوّن. أضف scoped لحصر الأنماط في عناصر هذا المكوّن فقط — مما يمنع تسرّب الأنماط العامة غير المقصود.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>آلية عمل الأنماط المحصورة
يضيف Vue سمة بيانات فريدة (مثل data-v-abc123) إلى عناصر المكوّن، ويعيد كتابة محددات CSS المحصورة لتتضمنها. ويضمن ذلك أن تطابق الأنماط العناصر الموجودة في هذا المكوّن فقط.
CSS Modules في Vue
بديلًا عن scoped، استخدم <style module> من أجل CSS Modules. ويمكنك الوصول إلى أسماء الفئات عبر كائن $style في القالب.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>الأنماط العامة
تنطبق الأنماط التي لا تتضمن scoped بشكل عام. ومن الأنماط الشائعة استخدام app.css عام للأنماط الأساسية ورموز التصميم، إلى جانب أنماط محصورة لكل مكوّن للقواعد الخاصة به.
TypeScript في SFCs
أضف lang="ts" إلى كتلة script لاستخدام TypeScript. ويوفر Volar (إضافة Vue الرسمية لبيئات التطوير المتكاملة) دعمًا كاملًا لـ TypeScript في Vue SFCs، بما في ذلك القوالب التي تخضع لفحص الأنواع.
تسمية ملفات SFC
سمِّ ملفات SFC بصيغة PascalCase (UserProfile.vue) للمكوّنات المستخدمة في القوالب. وتوصي Vue باستخدام أسماء متعددة الكلمات لتجنب التعارض مع عناصر HTML.
تحقّق سريع
ما وظيفة السمة scoped في كتلة <style> ضمن Vue؟
مراجعة: Vue SFCs
تحتوي ملفات .vue على ثلاث كتل: script (المنطق)، وtemplate (العرض)، وstyle (CSS). استخدم