كتابة التوجيهات المخصصة
app.directive()، وخطافات mounted/updated/unmounted، ومعاملات التوجيه ومعدّلاته
كتابة التوجيهات المخصصة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
عندما لا تكفي المكوّنات
تحدث معظم عمليات إعادة الاستخدام في Vue عبر المكوّنات وcomposables. لكن بعض المنطق يستهدف DOM الخام — مثل التركيز التلقائي على حقل إدخال، أو دمج مكتبة غير تابعة لـ Vue، أو قياس عنصر. وقد صُمّمت التوجيهات المخصّصة لهذا الغرض تحديدًا.
توجيه بسيط
سجّل توجيهًا في التطبيق باستخدام app.directive. وتتلقى hook باسم mounted العنصر، ولذلك يركّز هذا التوجيه على حقل إدخال عند ظهوره.
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})استخدام التوجيه
طبّقه في القالب باستخدام البادئة v- متبوعة بالاسم المسجّل.
<template>
<input v-focus />
</template>التوجيهات المحلية في script setup
داخل <script setup>، يصبح أي متغير على المستوى الأعلى يبدأ بـ v ومسمّى بصيغة camelCase توجيهًا قابلًا للاستخدام. سمّه vFocus واستخدمه بصيغة v-focus.
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>كائن الربط
يتلقى كل hook كائن binding بوصفه الوسيطة الثانية. ويحمل هذا الكائن قيمة التوجيه والوسيطة والمعدّلات الممرَّرة في القالب.
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})تمرير قيمة
يصبح التعبير الذي يلي علامة المساواة هو binding.value. وهنا تُمرَّر قيمة لون وتُطبَّق على العنصر.
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})تمرير وسيطة
يصبح الجزء الذي يلي النقطتين هو binding.arg. وهذا يتيح لتوجيه واحد أن يتصرف بطريقة مختلفة استنادًا إلى تسمية.
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>استخدام المعدّلات
تظهر المعدّلات بعد النقاط، وتصل في binding.modifiers على شكل خريطة من القيم المنطقية. استخدمها لضبط السلوك.
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>خطافات دورة حياة التوجيه
للتوجيهات خطافات تحاكي دورة حياة المكوّن: created وbeforeMount وmounted وbeforeUpdate وupdated وbeforeUnmount وunmounted.
الاستجابة للتحديثات
يعمل hook updated بعد إعادة تصيير العنصر. قارن binding.value بـ binding.oldValue لاتخاذ إجراء عند التغييرات الفعلية فقط، ونظّف الموارد في unmounted.
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})التوجيهات في مقابل المكوّنات
فضّل المكوّنات لكل ما يتضمن بنية أو حالة. ولا تلجأ إلى التوجيهات إلا عندما تحتاج إلى وصول مباشر ومنخفض المستوى إلى DOM لا يناسب مكوّنًا، مثل إدارة التركيز أو أدوات DOM التابعة لجهات خارجية.
اختبار سريع
اختبر معرفتك بالتوجيهات المخصّصة.
خلاصة
تعلّمت إنشاء التوجيهات المخصّصة:
- سجّلها على مستوى التطبيق باستخدام
app.directive، أو محليًا باسمvNameفي script setup. - تمرّر
binding.valueوbinding.argوbinding.modifiersالبيانات إلى الداخل. - خطافات دورة الحياة: created وbeforeMount وmounted وbeforeUpdate وupdated وbeforeUnmount وunmounted.
- استخدم التوجيهات للعمل منخفض المستوى على DOM، وفضّل المكوّنات في الحالات الأخرى.
الأسئلة الشائعة
هل درس «كتابة التوجيهات المخصصة» مجاني؟
نعم — نص درس «كتابة التوجيهات المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «كتابة التوجيهات المخصصة»؟
app.directive()، وخطافات mounted/updated/unmounted، ومعاملات التوجيه ومعدّلاته تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «كتابة التوجيهات المخصصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-model: آليات الربط ثنائي الاتجاه الداخلية
- معدّلات أحداث v-on
- الربط الديناميكي والمتعدد باستخدام v-bind
- كتابة التوجيهات المخصصة