فيو جي اس (بالإنجليزية: VueJS) (يُشار إليه عادةً باسم فيو ونطقه يشبه نطق كلمة View الإنجليزية) هو إطار عمل جافاسكربت خاص بتصميم واجهات مواقع الويب. استُعمل فيو جي اس في تصميم واجهات مواقع مشهورة مثل نتفليكس، أدوبي، مجموعة علي بابا، غيت لاب، وغالبًا ما يستخدم بشكل رئيسي في تطوير تطبيقات الويب التي تعتمد على فلسفة ونمط الصفحة الواحدة (SPA) لقوم بتسهيل عملية البرمجة والتطوير ولكتابة كود أقل، والحصول على اداء عالي بسهولة.
التاريخ
تم إنشاء فيو بواسطة ايفان يو بعد العمل لصالح جوجل باستخدام أنجولار جي اس في عدد من المشاريع. لخص لاحقًا عملية تفكيره: «لقد برزت، ماذا لو كان بإمكاني فقط استخراج الجزء الذي أعجبني في أنجولار وبناء شيء خفيف الوزن حقًا.»[9] تم إصدار فيو لأول مرة في فبراير التالي، في عام 2014.
يحوي هذا القسم على بعض المفاهيم التي تعتمد على البرمجة الكائنية.
المكونات (Components)
المكونات أو العناصر (Vue Components) ترث الصفات الأساسية لعنصر HTML لتقوم بتغليفه فيصبح عُنصر قابل لإعادة الاستخدام، ليصبح استخدامه أبسط بـمستوى عال، تعد المكونات عناصر HTML مُخصصة يتحكم Vue بما يكمن ورائها، وفي إطار Vue يُعد المُكون بشكل أساسي Vue instance (مثيلًا لـ كائن Vue)، مع بعض الإعدادات المسبقة التي يمكن تعديلها، وفي المثال أدناه يظهر لنا عنصر بسيط [10]، عبارة عن زر <button> يعرض عدد النقرات التي نُقرت عليه، وكلما قمت بضغط الزر سوف يزيد الرقم المعروض داخله.
<!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 {{ count }} times.
</button>`
/*
template:
قالب المكون
هو قالب
HTML
يستخدمه فيو لعرض العنصر
و إجراء التغيرات فيه
*/
/*
ما بين الأقواس المعقوفة
{{ count }}
تعد أكواد جافاسكربت وفي هذه الحالة سيتم عرض قيمة
count
*/
/*
@click
سيراقب فيو حدث الضغط على الزر ومن ثم يقوم بتنفيذ الأمر
count++
والتي ترجع إلى بيانات المُكون وسيقوم بتحديث البيانات في القالب، ويُعرض التغير للمستخدم
*/
})
app.mount('#app')
/*
ربط تطبيق فيو بالعنصر الذي يحمل
id="app"
في ملف
HTML
*/
</script>
</body>
</html>
قوالب (Templates)
يستخدم فيو قالبًا تشبه طريقة كتابته HTML إلى حد كبير جدًا مما يسهل على مطوري الويب التأقلم معه، يتيح القالب ربط البيانات مباشرةً على القالب بحيث يمكن للمتصفحات الداعمة لـفي تحليل القالب وعرضه كـHTML عادي، تستخدم قوالب فيو نظام Virtual DOM [بحاجة لتوضيح وتوسيع] .[11]
التفاعلية (Reactivity)
يتميز فيو بنظام تفاعلي يستخدم كائنات جافا سكريبت عادية وإعادة عرض محسّنة. يتتبع كل مكون تبعياته التفاعلية أثناء عرضه، لذلك يعرف النظام بدقة متى يتم إعادة التصيير، والمكونات التي يجب إعادة تصييرها.[12]
يوفر فيو العديد من الخيارات لإضافة لإنتقالات وتأثيرات حركية على العناصر حينما يتم إدراجها، تحديثها، أو حذفها من الـ DOM ، ويكمن ذلك من خلال:
- قيام فيو بوضع CSS Classes بشكل تلقائي من أجل الإنتقالات والتأثيرات الحركية.
- إتاحة إمكانية دمج مكتبات CSS تحوي تأثيرات أنميشن حركية، على سبيل المثال Animate.css.
إضافة فيو جي اس للمتصفحات (Vue extension)
إضافة بسيطة يمكن تنصيبها على متصفح جوجل كروم أو فيرفوكس أو المتصفحات المبنية عليها، تعرف باسم فيو-ديفـتولس (بالإنجليزية: vue-devtools) .
ملاحظة مهمة: بخصوص فيو- ديفتولس هي انه لا يمكنك استخدامها إن كنت قد اخترت الملف المصغر من فيو في مشروعك، وعليك أيضاً أحياناً تفعيلها ضمن مشروعك إن لم تكن مفعلة مسبقاً، يمكنك تفعيلها عبر الكود التالي:
Vue.config.productionTip = false
تعطيك هذه الإضافة نظرة عامة عن المشروع بجميع تفاصيله، المتغيرات التي قمت بتحديدها والدوال وغير ذلك كما تقوم بقياس اداء الصفحة وغيرها من الأمور.
انظر أيضًا
مراجع
وصلات خارجية
