v-cloak إخفاء القالب غير المُترجم
آخر تحديث: 2026-10-22
v-cloak إخفاء القالب غير المُترجم
يبقى v-cloak على العنصر حتى تنتهي الترجمة؛ ومع CSS يخفي القالب الخام ويمنع وميض {{ }} عند العرض الأول.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
[v-cloak] { display: none; }
<div v-cloak>{{ msg }}</div>⚙️ الوسائط
| expression | بلا تعبير |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
On slow networks the raw braces stay hidden until Vue mounts and the real text appears.💡 نقاط مهمة
⚠️ تحذير عليك أن تضيف قاعدة CSS التالية [v-cloak]{display:none} بنفسك — فالسمة لا تحمل أي تنسيق.
ℹ️ ملاحظة لا يلزم إلا مع البناء الكامل وبدون أداة تجميع (bundler)؛ أما ناتج SFC المترجم فلا يومض أبدًا.
💡 نصيحة يزيل Vue السمة بعد الترجمة، فتتوقف قاعدة الإخفاء عن العمل.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا عليّ كتابة CSS بنفسي؟
ج إنه مجرد سمة علامة — وأنت من يصرِّح بـ [v-cloak]{display:none}.
س هل ما زال لازمًا في المشاريع الحديثة؟
ج ليس مع تجميع SFC (لا يوجد قالب خام)؛ ولا يحتاجه إلا صفحات CDN بالبناء الكامل.
س هل تُزال السمة بعد الترجمة؟
ج نعم — يزيلها Vue عند التركيب (mount) فتتوقف قاعدة الإخفاء عن العمل.
