فيو جي إس

Vue.js
الشعار
معلومات عامة
نوع
نظام التشغيل
النموذج المصدري
المطور الأصلي
موقع الويب
vuejs.org (الإنجليزية) عدل القيمة على Wikidata
معلومات تقنية
ضمان الجودة
لغة البرمجة
الإصدار الأول
فبراير 2014 [6] عدل القيمة على Wikidata
الإصدار الأخير
  • 3.5.12
    (11 أكتوبر 2024)     [7] عدل القيمة على Wikidata
المستودع
الرخصة

تعديل - تعديل مصدري - تعديل ويكي بياناتحول القالب

فيو جي اس (بالإنجليزية: 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]

الإنتقالات (Transitions) [بحاجة لتوضيح وتوسيع]

[عدل]

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

  • قيام فيو بوضع CSS Classes بشكل تلقائي من أجل الإنتقالات والتأثيرات الحركية.
  • إتاحة إمكانية دمج مكتبات CSS تحوي تأثيرات أنميشن حركية، على سبيل المثال Animate.css.

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

[عدل]

إضافة بسيطة يمكن تنصيبها على متصفح جوجل كروم أو فيرفوكس أو المتصفحات المبنية عليها، تعرف باسم فيو-ديفـتولس (بالإنجليزية: vue-devtools)‏ .

ملاحظة مهمة: بخصوص فيو- ديفتولس هي انه لا يمكنك استخدامها إن كنت قد اخترت الملف المصغر من فيو في مشروعك، وعليك أيضاً أحياناً تفعيلها ضمن مشروعك إن لم تكن مفعلة مسبقاً، يمكنك تفعيلها عبر الكود التالي: Vue.config.productionTip = false تعطيك هذه الإضافة نظرة عامة عن المشروع بجميع تفاصيله، المتغيرات التي قمت بتحديدها والدوال وغير ذلك كما تقوم بقياس اداء الصفحة وغيرها من الأمور.

انظر أيضًا

[عدل]

مراجع

[عدل]
  1. ^ وصلة مرجع: https://vuejs.org/v2/guide/index.html.
  2. ^ وصلة مرجع: https://www.lemonde.fr/economie/article/2018/11/11/logiciel-libre-les-limites-du-modele-du-benevolat_5382054_3234.html.
  3. ^ وصلة مرجع: https://vuejs.org/v2/guide/team.html.
  4. ^ وصلة مرجع: https://evanyou.me/.
  5. ^ "The vue-js Open Source Project on Open Hub: Languages Page". أهلوه. اطلع عليه بتاريخ 2018-09-20.
  6. ^ وصلة مرجع: https://egghead.io/podcasts/evan-you-creator-of-vue-js.
  7. ^ ا ب "Release 3.5.12". 11 أكتوبر 2024. اطلع عليه بتاريخ 2024-10-27.
  8. ^ وصلة مرجع: https://github.com/vuejs/vue/blob/v2.5.17/LICENSE. الوصول: 16 سبتمبر 2018.
  9. ^ "Between the Wires | Evan You". Between the Wires. 3 نوفمبر 2016. مؤرشف من الأصل في 2017-06-03. اطلع عليه بتاريخ 2017-08-26.
  10. ^ "Components Basics — Vue.js". vuejs.org (بالإنجليزية). Archived from the original on 2021-06-06. Retrieved 2021-06-09.
  11. ^ "Template Syntax - Vue.js" (بالإنجليزية). Archived from the original on 4 نوفمبر 2021. Retrieved 05/11/2021. {{استشهاد ويب}}: تحقق من التاريخ في: |تاريخ الوصول= (help)
  12. ^ "reactivity". فيو جي إس. 11 مارس 2017. مؤرشف من الأصل في 2021-05-06. اطلع عليه بتاريخ 2021-06-16.

وصلات خارجية

[عدل]