عبد العزيز: بوت: التصانيف المعادلة:+ 2 (تصنيف:أطر عمل الويب، تصنيف:برمجيات 2014)

2023-06-20T20:35:01Z

بوت: التصانيف المعادلة:+ 2 (تصنيف:أطر عمل الويب، تصنيف:برمجيات 2014)

صفحة جديدة

{{بطاقة برمجية}}

'''فيو جي اس''' {{إنج|VueJS}} (يُشار إليه عادةً باسم فيو ونطقه يشبه نطق كلمة '''View''' الإنجليزية) هو [[إطار عمل (برمجة)|إطار عمل]] [[جافا سكريبت|جافاسكربت]] خاص بتصميم واجهات [[موقع ويب|مواقع الويب]]. استُعمل '''فيو جي اس''' في تصميم واجهات مواقع مشهورة مثل [[نتفليكس]]، [[أدوبي]]، [[مجموعة علي بابا]]، [[غيت لاب]]، وغالبًا ما يستخدم بشكل رئيسي في تطوير تطبيقات الويب التي تعتمد على فلسفة و[[تطبيق الصفحة الواحدة (ويب)|نمط الصفحة الواحدة]] '''(SPA)''' لقوم بتسهيل عملية البرمجة والتطوير ولكتابة كود أقل، والحصول على اداء عالي بسهولة.

== التاريخ ==

تم إنشاء فيو بواسطة ايفان يو بعد العمل لصالح [[جوجل]] باستخدام [[أنجولار جي إس|أنجولار جي اس]] في عدد من المشاريع. لخص لاحقًا عملية تفكيره: «لقد برزت، ماذا لو كان بإمكاني فقط استخراج الجزء الذي أعجبني في [[أنجولار جي إس|أنجولار]] وبناء شيء خفيف الوزن حقًا.»<ref>{{استشهاد بخبر|مسار=https://betweenthewires.org/2016/11/03/evan-you/|مسار أرشيف=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/|حالة المسار=dead|تاريخ أرشيف=2017-06-03|عنوان=Between the Wires {{!}} Evan You|تاريخ=2016-11-03|عمل=Between the Wires|تاريخ الوصول=2017-08-26}}</ref> تم إصدار فيو لأول مرة في [[فبراير]] التالي، في عام [[2014]].

== المميزات {{بحاجة لتوضيح وتوسيع}} ==
'''يحوي هذا القسم على بعض المفاهيم التي تعتمد على البرمجة الكائنية.'''
{{مفصلة|برمجة كائنية التوجه}}

=== المكونات (Components) ===
المكونات أو العناصر (Vue Components) [[برمجة كائنية التوجه|ترث]] الصفات الأساسية [[عنصر (لغة ترميز النص الفائق)|لعنصر HTML]] لتقوم [[برمجة كائنية التوجه|بتغليفه]] فيصبح عُنصر قابل [[إعادة استخدام|لإعادة الاستخدام]]، ليصبح استخدامه أبسط بـ<nowiki/>[[لغة برمجة عالية المستوى|مستوى عال]]، تعد المكونات عناصر HTML مُخصصة يتحكم Vue بما يكمن ورائها، وفي إطار Vue يُعد المُكون بشكل أساسي Vue instance ([[مثيل (برمجة كائنية التوجه)|مثيلًا]] لـ كائن Vue)، مع بعض الإعدادات المسبقة التي يمكن تعديلها، وفي المثال أدناه يظهر لنا عنصر بسيط <ref>{{استشهاد ويب
| مسار = https://vuejs.org/v2/guide/components.html
| عنوان = Components Basics — Vue.js
| موقع = vuejs.org
| لغة = en
| تاريخ الوصول = 2021-06-09
| مسار أرشيف = https://web.archive.org/web/20210606050529/https://vuejs.org/v2/guide/components.html | تاريخ أرشيف = 6 يونيو 2021 }}</ref>، عبارة عن زر <code><button></code> يعرض عدد النقرات التي نُقرت عليه، وكلما قمت بضغط الزر سوف يزيد الرقم المعروض داخله.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<body>
<div id="app">

<button-counter></button-counter>

</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>

</syntaxhighlight>

=== قوالب (Templates) ===
يستخدم '''فيو''' قالبًا تشبه طريقة كتابته HTML إلى حد كبير جدًا مما يسهل على مطوري الويب التأقلم معه، يتيح القالب ربط البيانات مباشرةً على القالب بحيث يمكن للمتصفحات الداعمة لـفي تحليل القالب وعرضه كـHTML عادي، تستخدم '''قوالب فيو''' نظام Virtual DOM {{بحاجة لتوضيح وتوسيع}} .<ref>{{استشهاد ويب
| مسار = https://vuejs.org/v2/guide/syntax.html
| عنوان = Template Syntax - Vue.js
| لغة = en
| تاريخ الوصول = 05/11/2021
| مسار أرشيف = https://web.archive.org/web/20211104004717/https://vuejs.org/v2/guide/syntax.html | تاريخ أرشيف = 4 نوفمبر 2021 }}</ref>

=== التفاعلية (Reactivity) ===
يتميز '''فيو''' بنظام تفاعلي يستخدم كائنات [[جافا سكريبت]] عادية وإعادة عرض محسّنة. يتتبع كل مكون تبعياته التفاعلية أثناء عرضه، لذلك يعرف النظام بدقة متى يتم إعادة التصيير، والمكونات التي يجب إعادة تصييرها.<ref>{{استشهاد ويب
| مسار = https://vuejs.org/v2/guide/reactivity.html
| عنوان = reactivity
| تاريخ = 11-3-2017
| تاريخ الوصول = 16-6-2021
| موقع = فيو جي إس
| مسار أرشيف = https://web.archive.org/web/20210506193422/https://vuejs.org/v2/guide/reactivity.html
| تاريخ أرشيف = 2021-05-06
}}</ref>

=== الإنتقالات (Transitions) {{بحاجة لتوضيح وتوسيع}} ===
يوفر '''فيو''' العديد من الخيارات لإضافة لإنتقالات وتأثيرات حركية على العناصر حينما يتم إدراجها، تحديثها، أو حذفها من الـ DOM ، ويكمن ذلك من خلال:

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

== إضافة فيو جي اس للمتصفحات (Vue extension) ==
إضافة بسيطة يمكن تنصيبها على متصفح [[جوجل كروم]] أو [[فايرفوكس|فيرفوكس]] أو المتصفحات المبنية عليها، تعرف باسم فيو-ديفـتولس {{إنج|vue-devtools}} .

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

== انظر أيضًا ==

* [[أنجولار]]
* [[أنجولار جي إس]]
* [[رياكت]]

== مراجع ==

{{مراجع}}

== وصلات خارجية ==

* {{روابط برمجيات}}
{{روابط شقيقة}}
{{أطر العمل للويب}}
{{شريط بوابات|إنترنت|برمجيات حرة|تقانة|تقانة المعلومات|علم الحاسوب}}

[[تصنيف:استحداثات متعلقة بالحواسيب في 2014]]
[[تصنيف:أطر عمل الويب]]
[[تصنيف:أطر عمل برمجيات]]
[[تصنيف:إطارات عمل جافا سكريبت]]
[[تصنيف:برمجيات 2014]]
[[تصنيف:برمجيات تستخدم رخصة إم أي تي]]
[[تصنيف:تطبيقات ويب]]
[[تصنيف:تطوير الويب]]
[[تصنيف:مكتبات جافا سكريبت]]

فيو جي إس - تاريخ المراجعة

عبد العزيز: بوت: التصانيف المعادلة:+ 2 (تصنيف:أطر عمل الويب، تصنيف:برمجيات 2014)