Vue / الأساسي: المكوّنات التفاعلية وعقود الإدخال / الدرس 1

تطبيقات Vue والمكوّنات أحادية الملف

اربط نسخة تطبيق Vue وحالة المكوّن والقالب وسياق البناء دون الخلط بين المصدر وما يفهمه المتصفح.

وقت القراءة التقريبي: 4 دقيقةتاريخ مراجعة المحتوى 2026-10-25

في هذه الصفحة

أهداف الدرس

اشرح حد التطبيق وترجمة المكوّن أحادي الملف.
حدد إصدار Vue المعتمد والإعداد المحيط صراحة.

صف الواجهة انطلاقاً من الحالة

Vue إطار لبناء الواجهات من مكوّنات وحالة تفاعلية. يصف المكوّن ما يعرض للمدخلات الحالية ويعالج أحداث تغيير الحالة، وينسق الإطار التحديث بدل استبدال كل عقدة DOM يدوياً. لا يلغي ذلك فهم JavaScript وHTML والوصول وسلوك المتصفح. تستخدم الدورة واجهة ملاحظات قراءة اصطناعية؛ حدد مالك الحالة وفعل المستخدم وتتبع ظهوره بدلاً من حفظ التوجيهات ككلمات سحرية.

اجعل الإصدار وعائلة الواجهة صريحين

تعتمد الدورة Vue 3.5 وComposition API والمكوّنات أحادية الملف، مع مراجعة الإصدار المستقر الرسمي 3.5.44 في 2026-10-25. تفصل صفحة الإصدارات مرشحات 3.6 عن المستقر فلا تدخل سلوكياتها في الأساس. ثبّت إصدارات مترجم وتشغيل وأدوات متوافقة؛ قد يولد المترجم الأحدث ما يحتاج تشغيلاً أحدث. يدعم Vue أيضاً Options API، فلا تنقل روابط setup إليه دون فهم قواعد النسخة والتصريح. حدد افتراضات المشروع قبل تقييم المقتطف.

اقرأ مسؤوليات أقسام الملف الثلاثة

قد يجمع ملف .vue النص والقالب والتنسيق لتترجمها الأدوات معاً. يمثل script setup صياغة ترجمة لمنطق إعداد المكوّن وتتاح روابطه العليا للقالب. يعمل جسم الإعداد لنسخ المكوّن ولا يتصرف كوحدة مشتركة واحدة. يمتلك المثال عداداً محلياً ويستخدم زراً حقيقياً لدعم لوحة المفاتيح. يحد scoped المطابقة بسمات مولدة، وليس حداً أمنياً أو ضمان عزل كل تنسيق متداخل. يبقى التطبيق والمترجم المحيطان مطلوبين.

vue مكوّن عداد محلي

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <button type="button" @click="count++">Read {{ count }} notes</button>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

يحفظ باسم App.vue داخل مشروع SFC متوافق. يبدأ النص Read 0 notes وتزيد كل ضغطة العدد الظاهر. لم ينفذ المقتطف في متصفح ويبقى غير قابل للتشغيل في الدورة.

اربط التطبيق بمدخل واضح

ينشئ createApp نسخة تطبيق ويربط mount بعنصر مضيف موجود. يجب وجود العنصر في HTML قبل تشغيل المدخل. تحتاج استيرادات SFC أدوات ترجمة؛ لا يفسر المتصفح .vue خاماً كـ JavaScript. ضع إضافات التطبيق وإعداده عند المدخل وحالة الميزة لدى المالك المناسب. قد تتعدد التطبيقات بصفحة ولكل إعداد منفصل. لا تكرر الربط لإصلاح خطأ حالة بل افحص الملكية والمدخلات.

javascript مدخل مشروع SFC مضبوط مسبقاً

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.mount("#app")

يحتوي HTML المشروع عنصراً بمعرّف app ويترجم المجمّع App.vue. لا يشمل المقتطف التثبيت أو البناء أو المتصفح ولا يغير ملفات مشروع أو خدمات.

افصل فشل الترجمة والتشغيل والحالة

تختلف أخطاء إضافة الترجمة والتعبير والاستيراد والمضيف والحالة غير التفاعلية. اقرأ أول تشخيص وحدد المرحلة قبل تغيير الاعتماديات. تفيد معاينة التطوير ولا تثبت البناء أو SSR أو الوصول. احتفظ بمكوّن صغير وافتراضاته عند التقرير. تتحقق الدورة من JavaScript المحلي وتوسم أجزاء الإطار بصدق؛ لا يثبت فحص الصياغة ترجمة Vue أو عرضه. يحفظ الفرق قيمة المثال دون اختلاق نتيجة متصفح.

الأخطاء الشائعة وإصلاحها

يعجز المتصفح عن تحميل SFC مباشرة

لماذا يحدث؟: عومل ملف المصدر كـ JavaScript مترجم.
كيف تصلحه؟: استخدم تكامل بناء SFC المتوافق.
كيف تتجنب تكراره؟: وثق المترجم والتشغيل مع المثال.

يفشل الربط في إيجاد المضيف

لماذا يحدث؟: يغيب الهدف أو لا يتاح وقت المدخل.
كيف تصلحه؟: تحقق من هوية المضيف وترتيب التحميل.
كيف تتجنب تكراره؟: اجعل مدخل التطبيق صريحاً.

يخلط مثال Options API مع setup خطأ

لماذا يحدث؟: اعتُبر نموذجا التصريح والنسخة متكافئين.
كيف تصلحه؟: حوّل المثال وفق سياق واجهته.
كيف تتجنب تكراره؟: حدد العائلة والإصدار.

اختبر فهمك

1. هل يجعل scoped CSS عرض HTML غير موثوق آمناً؟

اعرض الحل المشروح

لا؛ تخص السمات مطابقة التنسيق بينما المحتوى غير الموثوق حد أمني مستقل. استخدم الاستيفاء المهرب للنص، ولا تعتمد التنقية المراجعة إلا عند الحاجة الفعلية للمحتوى الغني.

2. يعمل العداد في صفحة تطوير. ما الادعاءات غير المتحققة؟