الأمر المخصص في Vue.js (التوجيه) هو طريقة تسمح لك بإنشاء توجيهات مخصصة يمكن استخدامها للتعامل مع عناصر DOM بطريقة معينة. يمكن استخدامه لإضافة ميزات خاصة للعناصر، مثل إضافة أحداث، أو تغيير نمط، أو أي سلوك مخصص آخر. لإنشاء أمر مخصص في Vue.js، يمكنك اتباع الخطوات التالية: 1. **تحديد الأمر**: يمكنك استخدام خاصية `Vue.directive` لتعريف الأمر الجديد. يجب أن يكون لديك اسم للأمر و الوظيفة التي تريد تنفيذها. 2. **إنشاء الوظيفة**: يجب أن تحتوي الوظيفة الخاصة بك على نوع معين من المعالج التلقائي، مثل `bind` و `inserted` و `update` وغيرها، للتعامل مع مختلف مراحل حياة العنصر. 3. **استخدام الأمر**: بعد تعريف الأمر المخصص، يمكنك استخدامه في مكونات Vue الخاصة بك عن طريق إضافة سمة جديدة تتبع صيغة `v-اسم_الأمر`. مثال على إنشاء أمر مخصص: ```javascript // تعريف أمر مخصص Vue.directive('focus', { // عندما يتم إدخال العنصر إلى DOM inserted: function (el) { // التركيز على العنصر el.focus(); } }); // استخدام الأمر المخصص في مكون new Vue({ el: '#app', template: '<input v-focus />' }); ``` في هذا المثال، سيتم التركيز تلقائيًا على الحقل النصي عند إدخاله إلى DOM.

ما هي التوجيهات المخصصة في Vue.js وكيفية إنشائها

التوجيهات هي قطع من الشيفرة التي تتيح للعنصر أو المكون الذي يتم اختياره (DOM) أو يتم تضمينه التحرك وفقًا للتعريفات التي كتبناها وفقًا لقواعد كتابة v-directiveName (الصياغة). هناك بعض التوجيهات الأساسية المتاحة داخل Vue.js. بفضل هذه التوجيهات المدروسة مسبقًا، تتم العمليات بشكل أكثر ملاءمة وسهولة. ولكن، إذا لم تلبي هذه التوجيهات احتياجاتنا، ماذا سنفعل؟ هناك حل عملي لذلك باستخدام التوجيهات المخصصة في Vue.js.

إذا كانت التوجيهات التي توفرها Vue.js غير كافية أو خارج نطاق ما نريده، فإن Vue.js تتيح لنا إنشاء التوجيهات الخاصة بنا. تُعرف هذه التوجيهات المخصصة في Vue.js باسم التوجيهات المخصصة. دعونا نتعرف سويًا على كيفية إنشاء توجيه مخصص في Vue.js.

عند إنشاء أي توجيه مخصص، يجب علينا تعريف هذا التوجيه بشكل عالمي ليتم استدعاؤه واستخدامه في كل مكان، ويكون ذلك عن طريق تعريفه في main.js. التعريف يكون كما يلي:

يحتاج عمل التوجيه إلى 5 طرق مختلفة، وتُعرف هذه بـ
خطاطيف التوجيه. الطرق هي الأساليب التي يتم تفعيلها في دورة حياة التوجيه خطاطيف التوجيه، والأكثر استخدامًا هو الأسلوب bind الظاهر في المثال أعلاه (el, binding)، والذي يحتفظ ببعض المعلمات. الآن دعونا نلقي نظرة على المعلمات التي يتلقاها هذا الأسلوب.

el: يمكننا الوصول إلى العنصر الذي تم استخدام التوجيه فيه بواسطة هذه المعلمة (التدخل في DOM).
binding: هذه المعلمة تحتفظ بالبيانات حول أي متغير يتلقاه التوجيه وما نوع البيانات التي يتم إرسالها، وتظهر لنا هذه البيانات. (الخصائص)

كيف يمكننا إرسال بيانات إلى التوجيه الذي أنشأناه؟

يمكننا إرسال أي بيانات إلى التوجيه الذي عرفناه في main.js داخل ملف app.vue، لأننا لا نريد استخدام توجيه ذو قيمة واحدة فقط بشكل مستمر. فكيف سنفعل ذلك؟

كيف سنستخدمه؟

الإجابة بسيطة للغاية. ليس هناك فرق عن التوجيهات المستخدمة بشكل عادي. يمكنك مشاهدة المثال أدناه...

نتيجة

شكرًا لقراءتك، نراكم في مدونتنا القادمة بمعلومات جديدة.

سنشارك تطبيقًا جميلًا الأسبوع المقبل، تابعونا