فيو جي إس

@click

سيراقب فيو حدث الضغط على الزر ومن ثم يقوم بتنفيذ الأمر

*/

إضافةً إلى ذلك، يتميز فيو بنظام تفاعلي يستعمل كائنات جافا سكريبت عادية وإعادة عرض محسّنة. يتتبع كل مكون تبعياته التفاعلية أثناء عرضه، لذلك يعرف النظام بدقة متى يتم إعادة التصيير، والمكونات التي يجب إعادة تصييرها.

قوالب (Templates)

التفاعلية (Reactivity)

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

ومن ناحية أخرى، يوفر فيو الكثير من الخيارات لإضافة لإنتقالات وتأثيرات حركية على العناصر حينما يتم إدراجها، تحديثها، أو حذفها من الـ DOM ، ويكمن ذلك من خلال:

إضافة فيو جي اس للمتصفحات (Vue extension)

وعلى صعيد آخر، ملاحظة مهمة: بخصوص فيو- ديفتولس هي انه لا يمكنك استخدامها إن كنت قد اخترت الملف المصغر من فيو في مشروعك، وعليك كذلك أحياناً تفعيلها ضمن مشروعك إن لم تكن مفعلة مسبقاً، يمكنك تفعيلها عبر الكود التالي:

وعلى صعيد آخر، إضافة بسيطة يمكن تنصيبها على متصفح جوجل كروم أو فيرفوكس أو المتصفحات المبنية عليها، تعرف باسم فيو-ديفـتولس .

وفي هذا الصدد، إتاحة إمكانية دمج مكتبات CSS تحوي تأثيرات أنميشن حركية، مثلًا Animate.css.

علاوةً على ذلك، قيام فيو بوضع CSS Classes بشكل تلقائي من أجل الإنتقالات والتأثيرات الحركية.

الإنتقالات (Transitions)

*/

• })
• app.mount('#app')
• /*

template: `

You clicked me times.

`

ربط تطبيق فيو بالعنصر الذي يحمل

• id="app"
• في ملف
• HTML

ما بين الأقواس المعقوفة

• تعد أكواد جافاسكربت وفي هذه الحالة سيتم عرض قيمة
• count
• */
• /*

التاريخ

كذلك، تم إنشاء فيو بواسطة ايفان يو بعد العمل لصالح جوجل باستخدام أنجولار جي اس في عدد من المشاريع. لخص لاحقًا عملية تفكيره: «لقد برزت، ماذا لو كان بإمكاني فقط استخراج الجزء الذي أعجبني في أنجولار وبناء شيء خفيف الوزن حقًا.» تم إصدار فيو لأول مرة في فبراير التالي، في عام 2014.

المميزات

ومن ناحية أخرى، المكونات أو العناصر (Vue Components) ترث الصفات الأساسية لعنصر HTML لتقوم بتغليفه فيصبح عُنصر قابل لإعادة الاستخدام، ليصبح استخدامه أبسط بـمستوى عال، تعد المكونات عناصر HTML مُخصصة يتحكم Vue بما يكمن ورائها، وفي إطار Vue يُعد المُكون بشكل أساسي Vue instance (مثيلًا لـ كائن Vue)، مع بعض الإعدادات المسبقة التي يمكن تعديلها، وفي المثال أدناه يظهر لنا عنصر بسيط ، عبارة عن زر يعرض عدد النقرات التي نُقرت عليه، وكلما قمت بضغط الزر سوف يزيد الرقم المعروض داخله.<!DOCTYPE html>

المكونات (Components)

• <!--
• الزر المخصص الذي بُرمج باستخدام
• Vue
• -->
• <!-- إدراج ملفات فيو -->

إضافةً إلى ذلك، يحوي هذا القسم على بعض المفاهيم التي تعتمد على البرمجة الكائنية.

/*

• template:
• قالب المكون
• هو قالب
• HTML
• يستعمله فيو لعرض العنصر
• و إجراء التغيرات فيه
• */
• /*

Vue.config.productionTip = false

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

• انظر كذلك
• أنجولار
• أنجولار جي إس
• رياكت
• نوكست
• مراجع

//

• const app = Vue.createApp({})
• // انشاء تطبيق فيو
• app.component('button-counter', {
• // تعريف مكون جديد في تطبيق فيو
• data {
• return {
• count: 0
• }
• }
• // بيانات المُكون
• /*
• يتم تخزين البيانات بنمط كائنات جافاسكربت
• Object, Key: Value
• */
• /*
• count
• هو المفتاح
• 0
• هي القيمة
• */
• ,

count++

إضافةً إلى ذلك، والتي ترجع إلى بيانات المُكون وسيقوم بتحديث البيانات في القالب، ويُعرض التغير للمستعمل