Vue.js هو إطار عمل جافا سكريبت مفتوح المصدر للواجهة الأمامية (نموذج عرض) لبناء واجهات المستخدم والتطبيقات ذات الصفحة الواحدة.
تم إنشاؤه بواسطة Evan You ويتم الحفاظ عليه من قبله وبقية أعضاء الفريق الأساسيين النشطين.
Vue.js الميزات
فيما يلي الميزات المتوفرة مع Vue.js.
DOM الافتراضية
يستخدم DOM Vue.js الافتراضي، والذي تستخدمه أيضا أطر عمل أخرى مثل Rereact و Ember وما إلى ذلك.
لا يتم إجراء التغييرات على DOM، بدلا من ذلك يتم إنشاء نسخة طبق الأصل من DOM موجودة في شكل هياكل بيانات جافا سكريبت.
كلما تم إجراء أي تغييرات، يتم إجراؤها على هياكل بيانات جافا سكريبت ويتم مقارنتها ببنية البيانات الأصلية.
ثم يتم تحديث التغييرات النهائية إلى DOM الاصلي، والذي سيرى المستخدم تغييره.
هذا جيد من حيث التحسين.
إنه أقل تكلفة، ويمكن إجراء التغييرات بمعدل أسرع.
ربط البيانات
تساعد ميزة ربط البيانات في معالجة أو تعيين قيم السمات HTML، وتغيير النمط، وتعيين الفئات بمساعدة توجيه ملزم يسمى v-bind متوفر مع Vue.js.
العناصر
العناصر هي واحدة من الميزات الهامة ل Vue.js التي تساعد على إنشاء عناصر مخصصة، والتي يمكن إعادة استخدامها في HTML.
التعامل مع الأحداث
v-on هي السمة المضافة إلى عناصر DOM للاستماع إلى الأحداث في Vue.js.
الرسوم المتحركة/الانتقال
يوفر Vue.js طرقا مختلفة لتطبيق الانتقال إلى عناصر HTML عند إضافتها/تحديثها أو إزالتها من DOM.
يحتوي Vue.js على مكون انتقال مدمج يحتاج إلى التفاف حول العنصر لتأثير الانتقال.
يمكننا بسهولة إضافة مكتبات الرسوم المتحركة التابعة لجهات خارجية وإضافة المزيد من التفاعل إلى الواجهة.
الخصائص المحسوبة
هذه هي واحدة من الميزات الهامة ل Vue.js.
يساعد على الاستماع إلى التغييرات التي تم إجراؤها على عناصر واجهة المستخدم وإجراء الحسابات اللازمة.
ليست هناك حاجة إلى ترميز إضافي لهذا الغرض.
القوالب
يوفر Vue.js قوالب تستند إلى HTML تربط DOM ببيانات مثيل Vue.
يقوم Vue بتجميع القوالب في وظائف DOM Render الافتراضية.
يمكننا الاستفادة من قالب وظائف العرض وللقيام بذلك يجب علينا استبدال القالب بوظيفة العرض.
توجيهات
يحتوي Vue.js على توجيهات مضمنة مثل v-if و v-else و v-show و v-on و v-bind و v-model، والتي تستخدم لتنفيذ إجراءات مختلفة على واجهة المستخدم.
Watchers
يتم تطبيق المراقبين على البيانات التي تتغير.
على سبيل المثال، قم بتشكيل عناصر الإدخال.
هنا، لا يتعين علينا إضافة أي أحداث إضافية.
يهتم Watcher بالتعامل مع أي تغييرات في البيانات مما يجعل الشفرة بسيطة وسريعة.
التوجيه
يتم إجراء التنقل بين الصفحات بمساعدة جهاز التوجيه vue.
الوزن الخفيف
Vue.js البرنامج النصي خفيف الوزن للغاية، كما أن الأداء سريع جدا.
Vue-CLI
يمكن تثبيت Vue.js في سطر الأوامر باستخدام واجهة سطر الأوامر vue-cli.
يساعد على بناء المشروع وتجميعها بسهولة باستخدام vue-cli.
إيجابيات وسلبيات Vue.js
- الحجم الصغير الذي يزن الرمز البريدي الذي تم تنزيله مع الإطار هو 18 كيلوبايت.
- عرض DOM الافتراضي والأداء.
- نظام التفاعل وخيارات ربط البيانات
- مكونات ملف واحد وسهولة القراءة
- قابلية إعادة استخدام المكونات.
- إمكانية قراءة التعليمات البرمجية.
- جيد لاختبار الوحدة.
- قدرات التكامل والمرونة
- نظام بيئي متين للأدوات
- أدوات تصحيح أخطاء المتصفح.
- آلية العرض من جانب الخادم.
- Pinia، مكتبة إدارة الدولة الرسمية ل Vue التي حلت محل Vuex.
- منحنى التعلم السلس
- وثائق موجزة
- دعم المجتمع
السلبيات:
- حاجز اللغة.
- نقص الدعم للمشاريع واسعة النطاق.
- خطر الإفراط في المرونة.
- الموارد المحدودة.
- القلة من المطورين ذوي الخبرة.
اين يتم استخدام Vue؟
بالنظر إلى جميع الجوانب، المفاهيمية والتقنية ل Vue.js، قد تتساءل عن المكان الذي قد يناسبه بشكل أفضل.
إلى جانب الغرض المباشر منه، وبناء تطبيقات من صفحة واحدة والعمل على صفحات الويب، فهو مناسب أيضا للعديد من المهام.
التعامل مع النماذج الأولية
أولا وقبل كل شيء، تم تصميم Vue.js للنماذج الأولية.
مع ربط البيانات المناسب، من الرائع أيضا التعامل مع الكثير من الرسوم المتحركة والعناصر التفاعلية والرسومات.
تعرف على واجهة المستخدم الخاصة بك، وقم بتثبيت Vue CLI، وأنت على ما يرام مع النماذج الأولية القابلة للنقر.
تجدر الإشارة أيضا إلى أنه لا يتطلب الكثير من المهارات أو الخبرات.
الحفاظ على التركيز على واجهة المستخدم
تركز Vue.js تركيز قوي على واجهة المستخدم، لأنها تتطلب فقط HTML و CSS و جافا سكريبت للعمل معها، دون الكثير من الأشياء الخاصة ب Vue.
على سبيل المثال، استخدمت IBM Vue كإطار أمامي الكلاود المختلطة الخاصة بها، بسبب منحنى التعلم الخفيف الوزن والاعتماد على HTML و CSS و جافا سكريبت.
طلب التكامل
إذا كان لديك تطبيق موجود، وتريد إضافة بعض التفاعل إليه، فيمكن أن يساعد Vue في ذلك.
نظرا لأنه يعتمد على جافا سكريبت، يمكن دمجه بسهولة في أي مشروع باستخدام جافا سكريبت.
على الرغم من ذلك، فهو متوافق مع العديد من التقنيات والأطر الخلفية مثل Laravel و Express و Rails و Django.
أيضا، أضف هنا سهولة التعلم لتغطية جانب تدريب الفريق.
حتى بالنظر إلى سلبيات Vue.js، لا يزال من الممكن استخدامه في المشاريع الكبيرة.
تتم معالجة معظم المشكلات في الوثائق، لذلك فهي مسألة بحث.
من بين اللاعبين العالميين الذين يستخدمون Vue لبناء مواقعهم على الويب ما يلي:
- Grammarly
- Upwork
- Gitlab
- Trivago
- Nintendo
استنتاج
ما هو Vue.js؟ بعبارات الشخص العادي، Vue.js هو إطار صغير مع امكانيات كثيرة.
بالنسبة لأولئك الذين يجدون أنه من الأسهل العمل من قائمة فارغة، يوفر Vue.js هذه الراحة.
الامتيازات الأخرى للإطار هي سرعته وبساطته ودعمه من مكتباته ومجتمعه.
يجب أن يؤدي تحليل مجموعة متنوعة من تطبيقات Vue.js عبر مواقع الويب المختلفة إلى تعزيز فهمك للإطار.
لكن تنفيذ Vue.js في مجموعة التكنولوجيا الخاصة بك سيتطلب فهما أعمق للتكنولوجيا وكيفية التعامل معه.