Vue.js: قواعد القوالب
آخر تحديث: 2026-10-20
تعد صيغة «template» في Vue امتدادًا إعلانيًا لـ HTML — فهي تضيف «التوجيهات» و«الاستيفاء» إلى HTML القياسي، مما يتيح لك عرض البيانات في DOM. تتشابه صيغة «template» بأكملها بنسبة 90% مع HTML، لذا يمكن لأي شخص على دراية بـ HTML البدء في استخدامها خلال 30 دقيقة.
تتمحور قوالب Vue حول ثلاثة عناصر أساسية: الاستيفاء (عرض البيانات) + التوجيهات (ربط الخصائص/الأحداث) + التعبيرات (تنفيذ جافا سكريبت). سيرشدك هذا الدرس إلى الطرق القياسية لاستخدام هذه العناصر الثلاثة.
1. ما ستتعلمه
- 4 طرق لاستخدام استيفاء «المستاش»
{{ }} - الاختلافات بين التوجيهات النصية الثلاثة: v-text و v-html و v-once
- v-bind: اختصار لـ «ربط السمات»
:وصيغة «object» - v-on: اختصار لـ «ربط الحدث»
@والمعدِّلات - القيود المفروضة على تعبيرات JS المتاحة في القوالب (لا يُسمح باستخدام الجمل)
- أغراض التوجيهين الحدوديين، v-pre و v-cloak
2. متطلبات عرض بطاقة منتج التجارة الإلكترونية
(1) المشكلة: 30 منتجًا — هل يجب النسخ واللصق 30 مرة؟
تقوم أليس بإنشاء لوحة تحكم إدارية لموقع تجارة إلكترونية. وهي بحاجة إلى عرض 30 بطاقة منتج. نهجها الأولي هو:
HTML
<!-- Copy and paste 30 times, nightmare... -->
<div class="product-card">
<h3>iPhone 15 Pro</h3>
<p>Price: $999</p>
<button>Edit</button>
</div>
<div class="product-card">
<h3>MacBook Pro</h3>
<p>Price: $2499</p>
<button>Edit</button>
</div>
<!-- ... And also 28 more ... -->
عندما يقول مدير المنتج تشارلي: «غيّر تنسيق السعر ليظهر رمز العملة»:
«أليس، لا يمكنك تعديل 30 ملفًا يدويًّا. وماذا لو كان لدينا 5,000 منتج الشهر المقبل؟ نحن بحاجة إلى قالب ديناميكي.»
(2) حل القوالب في Vue: مكون واحد، 30 نقطة بيانات
5 أسطر من كود القالب × 30 منتجًا = لا حاجة إلى النسخ واللصق. وعندما تتغير أسماء المنتجات أو أسعارها، يقوم Vue بتحديث DOM تلقائيًا.
(3) الإيرادات
بعد اعتماد قوالب Vue:
- حجم الكود: 30 × 15 سطراً = 450 سطراً → قالب واحد + 30 قيمة = 60 سطراً (-87%)
- تكاليف الصيانة: تغيير نمط قالب واحد → يتم تحديث 30 منتجًا في آن واحد
- إضافة منتج جديد: أضف صفًا واحدًا من البيانات → يتم عرض القالب تلقائيًا
3. الاستيفاء: Mustache {{ }}
(1) 4 طرق لتنفيذ الاستيفاء
| الصيغة | النتيجة | مثال |
|---|---|---|
{{ var }} |
عرض قيمة المتغير | <p>{{ username }}</p> → أليس |
{{ expr }} |
عرض نتيجة تعبير JS | <p>{{ count + 1 }}</p> → 6 |
{{ fn() }} |
قيمة الإرجاع لنداء الدالة | <p>{{ formatDate(date) }}</p> → 2 يوليو 2026 |
{{ obj.prop }} |
الوصول إلى خصائص الكائن | <p>{{ user.name }}</p> → أليس |
(2) الخصائص الخمس الرئيسية لعملية الاستيفاء
(3) الفرق بين الاستيفاء وـ v-text
▶ مثال: طرق مختلفة لكتابة عملية الاستيفاء
▶ جرّب الكودالإخراج:
TEXT
اسم المستخدم يظهر مكان تعبير username
الناتج الحسابي لتعبير count * 2 + 1
Passed عند score >= 60، وFailed فيما عداه
التاريخ المنسّق يظهر مكان استدعاء formatDate
4. توجيهات النص: v-text / v-html / v-once
(1) مقارنة بين الأوامر الثلاثة
| الأمر | الوظيفة | status الاستخدام | الأمان |
|---|---|---|---|
{{ }} الاستيفاء |
استيفاء النص | الإعداد الافتراضي | ✅ الأمان |
v-text |
تعيين خاصية textContent لعنصر ما | صيغة بديلة للتقريب | ✅ آمن |
v-html |
تعيين قيمة innerHTML لعنصر ما | عرض النص المنسق (يُستخدم بحذر) | ⚠️ خطر XSS |
v-once |
عرض مرة واحدة، دون تحديثات لاحقة | تحسين ثابت | ✅ الأمان |
(2) تحذير v-html
(3) تحسين أداء v-once
5. ربط الخصائص: v-bind والاختصار :
(1) أساسيات v-bind
(2) ربط الفئة والأسلوب (نقطة أساسية)
(3) أسلوب الربط
▶ مثال: 5 طرق لاستخدام v-bind
▶ جرّب الكودالإخراج:
TEXT
src من imageUrl والخاصية الديناميكية من attrName
الفئة active تُضاف عند isActive = true
activeClass و errorClass تُدمجان في مصفوفة
href = /users/1 من userId
6. ربط الأحداث: v-on والاختصار @
(1) أساسيات v-on
(2) مُعدِّلات الأحداث الشائعة (9)
(3) سلاسل المُعدِّلات
▶ مثال: 5 طرق لكتابة v-on
▶ جرّب الكودالإخراج:
TEXT
زر 1: handleClick عند النقر
زر 2: count++ ثم زر 3: تمرير item.id مع event
زر 4: stop و prevent معًا
حقل 5: submit عند Ctrl + Enter
(1) 📊 5. القوالب مقابل HTML — مرجع سريع
| العنصر | صيغة HTML | صيغة Vue | الوصف |
|---|---|---|---|
| نص ثابت | <p>Hello</p> |
<p>{{ msg }}</p> |
تحويل إلى نص ديناميكي |
| خاصية ثابتة | <img src="x.jpg"> |
<img :src="url"> |
التغيير إلى ديناميكي |
| فئة ثابتة | <div class="box"> |
<div :class="cls"> |
التغيير إلى ديناميكية |
| النمط الثابت | <div style="color: red"> |
<div :style="sty"> |
التبديل إلى النمط الديناميكي |
| حدث النقر | <button onclick="fn()"> |
<button @click="fn"> |
تعديل Vue |
| العرض الشرطي | لا شيء | <div v-if="ok"> |
خاص بـ Vue |
| عرض القائمة | لا شيء | <div v-for="i in list"> |
خاص بـ Vue |
(2) 📊 6. 5 أخطاء شائعة
| الخطأ | الأعراض | الحل |
|---|---|---|
احذف .value |
اكتب {{ count }} في القالب، وcount.value في ملف JS |
يقوم القالب بفك التعبئة تلقائيًا؛ أما ملف JS فيحتاج إلى .value |
كتابة if/for في {{ }} |
أخطاء الترجمة | استخدام توجيهات v-if / v-for |
| v-html XSS | مدخلات المستخدم <script> التنفيذ |
التنظيف باستخدام DOMPurify |
| لم تتلقَ الدالة المضمنة $event | يتعذر الوصول إلى كائن الحدث | @click="fn($event)" قم بتمريره صراحةً |
| ترتيب المُعدِّلات غير صحيح | فشل في منع انتقال التأثير | .stop يسبق .prevent (حسب الحاجة) |
7. قيود التعبير (لا يُسمح بإبداء الآراء)
(1) تعبيرات القوالب مقابل جمل جافا سكريبت
(2) التعبيرات مقابل الخصائص المحسوبة
| السيناريو | استخدام التعبيرات | استخدام الخصائص المحسوبة |
|---|---|---|
| العمليات الحسابية البسيطة (1–2 علامات حسابية) | ✅ | ❌ |
| منطق معقد (متعدد الخطوات، حلقات) | ❌ | ✅ |
| التخزين المؤقت مطلوب | ❌ | ✅ |
| المعلمات المطلوبة | ✅ | ❌ (استخدم طريقة بدلاً من ذلك) |
8. توجيهات Edge: v-pre / v-cloak
(1) v-pre: تخطي عملية الترجمة
السيناريو: توضيح بناء جملة قوالب Vue نفسها (مثل الدروس التعليمية ومواقع الوثائق).
(2) v-cloak: إخفاء قبل التحويل البرمجي
السيناريو: منع المستخدمين من رؤية {{ message }} تومض قبل التجميع.
9. تمرين شامل: بطاقة المنتج الديناميكية (الاستيفاء + v-bind + v-on)
▶ مثال: بطاقة المنتج الأساسية
▶ جرّب الكودالإخراج:
TEXT
اسم المنتج وسعره يظهران من الخاصية product
stock أكبر من 10 → شارة In Stock والزر مفعّل
stock = 0 → شارة Out of Stock والزر معطّل
بعد النقر: تُطبع Added واسم المنتج في console
❓ أسئلة شائعة
س ما الفرق بين
{{ }} و v-text؟ج لهما نفس التأثير — فكلاهما يضبطان خاصية
textContent للعنصر. الفرق هو أن {{ }} يمكن استخدامه جنبًا إلى جنب مع النص الثابت (<p>Hi, {{ name }}</p>)، بينما يجب أن يشغل v-text العنصر بأكمله (<p v-text="msg"></p>). نوصي باستخدام {{ }} لمزيد من المرونة.س هل v-html آمن؟
ج لا، إنه غير آمن. يقوم v-html بتحليل السلاسل على أنها HTML، مما يسمح للمستخدمين الضارين بإدخال
<script> لمهاجمة موقعك. ما لم تكن تثق بنسبة 100% في مصدر البيانات (مثل أداة عرض Markdown قمت بكتابتها بنفسك)، استخدم {{ }} للتقريب أو قم بتنقية البيانات أولاً باستخدام DOMPurify.sanitize().س ما هو ترتيب تنفيذ سلسلة مُعدِّلات v-on؟
ج من اليسار إلى اليمين. على سبيل المثال، يستدعي
@click.stop.prevent أولاً stopPropagation()، ثم preventDefault().س هل يمكن اختصار
v-bind؟ وهل يمكن اختصار v-on أيضًا؟ج اختصار
v-bind هو : (بدون v-bind)، واختصار v-on هو @ (موصى به). كلا الاختصارين هما ترميزات رسمية مدعومة منذ الإصدار Vue 2، وتدعمهما ميزة تمييز الصيغة في بيئة تطوير المتكاملة (IDE) وميزة الإكمال التلقائي.س هل يمكنني استخدام عبارات if/else في القوالب؟
ج لا. يجب أن تُرجع تعبيرات القوالب قيمةً، وعبارات if وfor هي عبارات برمجية وليست تعبيرات. استخدم التوجيهات v-if وv-else-if وv-else لتنفيذ العرض الشرطي.
س كيف يمكن التبديل ديناميكيًا بين فئات متعددة باستخدام v-bind؟
ج استخدم صيغة الكائن
:class="{ active: isActive, 'text-danger': hasError }". أو صيغة الarray :class="[activeClass, errorClass]". يمكنك المزج بين الصيغتين: :class="[isActive && 'active', { 'error': hasError }]".س كيف يمكنني استجابة اختصار لوحة المفاتيح Ctrl+S؟
ج استخدم مُعدِّل النظام
@keyup.ctrl.s="save" أو @keydown.ctrl.s.prevent="save" (أضف .prevent لمنع ظهور مربع حوار الحفظ الافتراضي للمتصفح). يدعم Vue 3 أيضًا المُعدِّل الدقيق .exact؛ على سبيل المثال، يتطلب @click.ctrl.exact الضغط على مفتاح Ctrl فقط — ولا يُسمح بالضغط على أي مفاتيح أخرى.📖 ملخص
- تُعد صيغة قوالب Vue امتدادًا إعلانيًا لـ HTML، وتركز على الاستيفاء والتوجيهات والتعبيرات.
- يدعم «Mustache Interpolation»
{{ }}المتغيرات، والتعبيرات، واستدعاءات الدوال، والمشغلات الثلاثية - لا يجوز أن تحتوي تعبيرات القوالب على عبارات if/for أو إعلانات المتغيرات (استخدم التوجيهات v-if و v-for بدلاً من ذلك)
- يستبدل v-text النص الكامل للعنصر؛ بينما يعرض v-html النص المنسق (خطر XSS)
- تحسين أداء v-once (يتم عرض المحتوى الثابت مرة واحدة فقط)، وv-pre يتخطى عملية التجميع
- v-bind (يُختصر بـ
:)، و v-on (يُختصر بـ@)، و3 طرق شائعة لربط الفئات - 9 مُعدِّلات للأحداث: .stop / .prevent / .once / .self / .capture / .passive + لوحة المفاتيح/الماوس/النظام
- الاختيار بين التعبيرات النموذجية والخصائص المحسوبة: استخدم التعبيرات في الحالات البسيطة، والخصائص المحسوبة في الحالات المعقدة
📝 تمارين
-
أسئلة أساسية (مستوى الصعوبة: ⭐)
اكتب مكونًا في Vue 3 يعرض بطاقة مستخدم تحتوي على:
- اسم المستخدم (الاستيفاء)
- صورة الملف الشخصي (v-bind)
- زر «متابعة» (v-on)
- status الاتصال/عدم الاتصال (زر تبديل ديناميكي)
البيانات المستخدمة: كائن المستخدم
{ name: 'Alice', avatar: 'alice.jpg', online: true } -
مسائل متقدمة (مستوى الصعوبة: ⭐⭐)
قم بتطبيق قائمة مهام بسيطة:
- حقل الإدخال (لا يُستخدم نموذج v في الوقت الحالي؛ يتم محاكاته باستخدام v-bind:value + @input)
- زر «إضافة» (@click + تعبير)
- عرض القوائم (v-for؛ سنتناول هذا الموضوع في الدرس التالي)
- يحتوي كل عنصر على زر حذف (@click + تمرير المعلمات)
البيانات:
const todos = ref(['Learn Vue', 'Build app', 'Deploy']) -
مسألة التحدي (مستوى الصعوبة: ⭐⭐⭐)
اكتب مكونًا كاملاً لبطاقة تفاصيل المنتج يدعم ما يلي:
- 5 شارات لstatus المنتج (متوفر/غير متوفر/طلب مسبق/معروض للبيع/تم إيقاف إنتاجه)
- تتوافق 5 حالات مع ألوان فئات مختلفة (يتم ربطها بشكل جماعي باستخدام صيغة الكائنات)
- أزرار زيادة/تقليل الكمية (النقر عليها يؤدي إلى الزيادة/التقليل)
- تعطيل زر «إضافة إلى سلة التسوق» عندما تكون الكمية أكبر من أو تساوي الكمية المتوفرة في المخزون (:يتم تعطيله ديناميكيًا)
- ما لا يقل عن 3 مُعدِّلات للأحداث (@click.stop، @submit.prevent، إلخ)
