جافا سكريبت

هل سمعت عن Vue.js


ما هو Vue.js؟

Vue.js هو إطار عمل JavaScript تقدمي مفتوح المصدر يستخدم لتطوير واجهات مستخدم ويب تفاعلية وتطبيقات صفحة واحدة. يركز Vue.js بشكل أساسي على جزء العرض من التطبيق والذي يسمى أيضًا تطوير الواجهة الأمامية. تزداد شعبية Vue.js يومًا بعد يوم لأنه من السهل جدًا دمجها مع المشاريع والمكتبات الأخرى. إنه سهل التثبيت والاستخدام. حتى المبتدئين يمكنهم فهمها بسهولة والبدء في بناء واجهات المستخدم الخاصة بهم.
يشار إلى Vue.js بشكل عام باسم Vue ويتم نطقها باسم “view.js” أو “view” .

تابعنا على الfacebook

ما هو تطبيق الصفحة الواحدة (SPA)؟
تطبيق الصفحة الواحدة (Single Page Application) أو SPA هو تطبيق ويب أو موقع ويب يوفر للمستخدمين تجربة سلسة للغاية وتفاعلية وسريعة تشبه تطبيقات سطح المكتب. يحتوي تطبيق الصفحة الواحدة على قائمة وأزرار وكتل في صفحة واحدة. عندما ينقر المستخدم على أي منها ، فإنه يعيد كتابة الصفحة الحالية ديناميكيًا بدلاً من تحميل صفحات جديدة كاملة من الخادم. هذا هو السبب وراء سرعته السريعة التفاعلية.
تم تطوير Vue أساسًا لتطوير الواجهة الأمامية ، لذلك يتعين عليه التعامل مع الكثير من ملفات HTML و JavaScript و CSS. يسهل Vue.js المستخدمين على توسيع HTML بسمات HTML تسمى التوجيهات. يوفر Vue.js توجيهات مضمنة والكثير من التوجيهات التي يحددها المستخدم لتحسين وظائف تطبيقات HTML.

تاريخ Vue.js
تم إنشاء Vue.js بواسطة Evan You ، الذي كان يعمل بعد ذلك لصالح Google باستخدام AngularJS في مشاريعهم. لقد استخرج بعض أجزاء AngularJS وقام ببناء إطار عمل JavaScript خفيف الوزن تم إصداره لاحقًا باسم Vue.js.
تم إطلاق الإصدار الأول من Vue.js في فبراير 2014. ويحتفظ به الآن هو وبقية أعضاء الفريق الأساسي النشطين القادمين من شركات مختلفة مثل Netlify و Netguru.
تزداد شعبية Vue.js يومًا بعد يوم لأنه من السهل جدًا دمجها مع المشاريع والمكتبات الأخرى. إنه سهل التثبيت والاستخدام حتى المبتدئين يمكنهم فهمها بسهولة والبدء في بناء واجهات المستخدم الخاصة بهم .

ميزات Vue.js

  • مكونات
    تعد مكونات Vue.js واحدة من الميزات المهمة في إطار العمل هذا. يتم استخدامها لتوسيع عناصر HTML الأساسية لتغليف التعليمات البرمجية القابلة لإعادة الاستخدام. يمكنك إنشاء عناصر مخصصة قابلة لإعادة الاستخدام في تطبيقات Vue.js يمكن إعادة استخدامها لاحقًا في HTML.
  • القوالب
    يوفر Vue.js قوالب مستندة إلى HTML يمكن استخدامها لربط DOM المعروض ببيانات مثيل Vue. جميع قوالب Vue هي HTML صالحة يمكن تحليلها بواسطة متصفحات متوافقة مع المواصفات ومحللات HTML. يجمع Vue.js القوالب في وظائف عرض DOM الظاهري. يعرض Vue المكونات في ذاكرة DOM الظاهرية قبل تحديث المتصفح. يمكن لـ Vue أيضًا حساب الحد الأدنى لعدد المكونات لإعادة التقديم وتطبيق الحد الأدنى من معالجات DOM عند تغيير حالة التطبيق.
  • التفاعلية
    يوفر Vue نظامًا تفاعليًا يستخدم كائنات JavaScript عادية ويحسن إعادة العرض. في هذه العملية ، يتتبع كل مكون تبعياته التفاعلية ، بحيث يعرف النظام بدقة متى والمكونات التي يجب إعادة تقديمها.
  • التوجيه
    يتم التنقل بين الصفحات بمساعدة vue-router. يمكنك استخدام مكتبة vue-router المدعومة رسميًا لتطبيق الصفحة الواحدة أو إذا كنت تحتاج فقط إلى توجيه بسيط ولا ترغب في استخدام مكتبة جهاز التوجيه كاملة الميزات ، يمكنك القيام بذلك عن طريق عرض مكون على مستوى الصفحة ديناميكيًا التالية:
const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } const routes = { '/': Home, '/about': About } new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) } })
Code language: JavaScript (javascript)
  • الانتقالات
    يتيح لك Vue استخدام تأثيرات انتقال مختلفة عند إدراج العناصر أو تحديثها أو إزالتها من DOM.

المتطلبات الأساسية
قبل التعرف على Vue.js بعمق ، يجب أن تكون لديك المعرفة الأساسية بـ HTML و CSS و JavaScript.

اظهر المزيد

مقالات ذات صلة

زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات