تتيح لك التوجيهات المخصصة توسيع وظائف صفحات الويب الخاصة بك على Vue بطريقة قابلة للتطوير والوحدات.

التوجيهات هي بنيات برمجة تحدد كيف يجب على المترجمين الفوريين والمترجمين معالجة المدخلات لعملية ما. تعمل توجيهات Vue على توسيع وظائف عناصر HTML في قوالب Vue ، مما يسمح بمعالجة DOM مباشرة.

يمكنك استخدام التوجيهات في Vue لإضافة مستمعين للأحداث ، من بين عمليات أخرى. ستقوم بإرفاق سمات إضافية بعناصر HTML لاستخدام التوجيهات في تطبيقك.

هيكل توجيهات Vue

التوجيهات في Vue لها أ الخامس- بادئة لتمييزها عن سمات HTML العادية. ال الخامس- تخبر البادئة مترجم Vue أن السمة عبارة عن توجيه Vue حتى يتمكن من معالجة وتطبيق سلوك هذا التوجيه على عنصر HTML.

إليك مثال يوضح استخدام امتداد v-show لعرض محتويات ملف h2 عنصر:

"حقيقي"> مرحبًا Vue </h2>

يحتوي Vue.js على العديد من التوجيهات المضمنة مثل v- ربط, v- إذا، و v-on، مما يتيح لك أداء مهام مثل ربط البيانات, التقديم الشرطي, التعامل مع الحدث، و اكثر.

تحديد التوجيهات المخصصة في Vue

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

instagram viewer

تسجيل التوجيهات المخصصة

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

يمكنك تسجيل التوجيهات المخصصة محليًا إذا كنت تنوي استخدام التوجيه المخصص داخل مكون Vue بسيط. إليك كيف يمكنك تسجيل ملف v- changecolor التوجيه محليا: