فيو جي إس  فيو جي اس (يُشار إليه عادةً باسم فيو ونطقه يشبه نطق كلمة View الإنجليزية) هو إطار عمل جافاسكربت خاص بتصميم واجهات مواقع الويب. استُعمل فيو جي اس في تصميم واجهات مواقع مشهورة مثل نتفليكس، أدوبي، مجموعة علي بابا، غيت لاب، وغالبًا ما يستخدم بشكل رئيسي في تطوير تطبيقات الويب التي تعتمد على فلسفة ونمط الصفحة الواحدة (SPA) لقوم بتسهيل عملية البرمجة والتطوير ولكتابة كود أقل، والحصول على اداء عالي بسهولة.  تم إنشاء فيو بواسطة ايفان يو بعد العمل لصالح جوجل باستخدام أنجولار جي اس في عدد من المشاريع. لخص لاحقًا عملية تفكيره: «لقد برزت، ماذا لو كان بإمكاني فقط استخراج الجزء الذي أعجبني في أنجولار وبناء شيء خفيف الوزن حقًا.» تم إصدار فيو لأول مرة في فبراير التالي، في عام 2014.  يحوي هذا القسم على بعض المفاهيم التي تعتمد على البرمجة الكائنية. المكونات أو العناصر (Vue Components) ترث الصفات الأساسية لعنصر HTML لتقوم بتغليفه فيصبح عُنصر قابل لإعادة الاستخدام، ليصبح استخدامه أبسط بـمستوى عال، تعد المكونات عناصر HTML مُخصصة يتحكم Vue بما يكمن ورائها، وفي إطار Vue يُعد المُكون بشكل أساسي Vue instance (مثيلًا لـ كائن Vue)، مع بعض الإعدادات المسبقة التي يمكن تعديلها، وفي المثال أدناه يظهر لنا عنصر بسيط ، عبارة عن زر codice_1 يعرض عدد النقرات التي نُقرت عليه، وكلما قمت بضغط الزر سوف يزيد الرقم المعروض داخله. <!DOCTYPE html> <html> <body> <div id="app">  <button-counter></button-counter> الزر المخصص الذي بُرمج باستخدام Vue </div>  <script src="https://unpkg.com/vue@next"></script> <!-- إدراج ملفات فيو --> <script> const app = Vue.createApp({}) // انشاء تطبيق فيو app.component('button-counter', { // تعريف مكون جديد في تطبيق فيو data() { return { count: 0 // بيانات المُكون يتم تخزين البيانات بنمط كائنات جافاسكربت Object, Key: Value /* count هو المفتاح 0 هي القيمة , template: ` <button @click="count++"> You clicked me times. </button>` template: قالب المكون هو قالب HTML يستخدمه فيو لعرض العنصر و إجراء التغيرات فيه /* ما بين الأقواس المعقوفة  تعد أكواد جافاسكربت وفي هذه الحالة سيتم عرض قيمة count /* @click سيراقب فيو حدث الضغط على الزر ومن ثم يقوم بتنفيذ الأمر count++ والتي ترجع إلى بيانات المُكون وسيقوم بتحديث البيانات في القالب، ويُعرض التغير للمستخدم })  app.mount('#app') ربط تطبيق فيو بالعنصر الذي يحمل id="app" في ملف HTML </script>  </body> </html>  يستخدم فيو قالبًا تشبه طريقة كتابته HTML إلى حد كبير جدًا مما يسهل على مطوري الويب التأقلم معه، يتيح القالب ربط البيانات مباشرةً على القالب بحيث يمكن للمتصفحات الداعمة لـفي تحليل القالب وعرضه كـHTML عادي، تستخدم قوالب فيو نظام Virtual DOM .  يتميز فيو بنظام تفاعلي يستخدم كائنات جافا سكريبت عادية وإعادة عرض محسّنة. يتتبع كل مكون تبعياته التفاعلية أثناء عرضه، لذلك يعرف النظام بدقة متى يتم إعادة التصيير، والمكونات التي يجب إعادة تصييرها.  يوفر فيو العديد من الخيارات لإضافة لإنتقالات وتأثيرات حركية على العناصر حينما يتم إدراجها، تحديثها، أو حذفها من الـ DOM ، ويكمن ذلك من خلال:   إضافة بسيطة يمكن تنصيبها على متصفح جوجل كروم أو فيرفوكس أو المتصفحات المبنية عليها، تعرف باسم فيو-ديفـتولس .  ملاحظة مهمة: بخصوص فيو- ديفتولس هي انه لا يمكنك استخدامها إن كنت قد اخترت الملف المصغر من فيو في مشروعك، وعليك أيضاً أحياناً تفعيلها ضمن مشروعك إن لم تكن مفعلة مسبقاً، يمكنك تفعيلها عبر الكود التالي: Vue.config.productionTip = false تعطيك هذه الإضافة نظرة عامة عن المشروع بجميع تفاصيله، المتغيرات التي قمت بتحديدها والدوال وغير ذلك كما تقوم بقياس اداء الصفحة وغيرها من الأمور.