55% خصم نحتفل فيها معكم بالذكرى الخامسة لنا معكم من التعلُّم الممتع، التعلم المرن .,

استخدم كوبون: FLEX5

الوقت المتبقي: 0يوم 0ساعة 0دقيقة 0ثانية

دورة برمجة صفحات الويب باستخدام Vue.js

vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين على مواقع الإنترنت Interactive Front-End

ماهي مكتبة vuejs ولماذا اتعلمها؟

ماذا سنتعلم في هذه الدورة؟

الجمل الشرطية conditions

التكرار Loops

التعامل مع البيانات وربطها Data binding

استخدام المتغيرات و انشائها Variables

استخدام العناصر المعدة مسبقا Components

التعامل مع أحداث المستخدم User Events

I18N لتعدد اللغات

التعامل مع Vuex

التحقق من صحة البيانات Validation

واجهة التكوين Composition API

الموجهات Vue Router لبناء صفحات متعددة

التواصل مع واجهات برمجية خارجية APIs

مشروع إنشاء صفحة متجر

وصف الدورة

ماهي VueJs؟

vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين مبنية على لغة JavaScript على مواقع الإنترنت تركز بشكل كبير على طبقة الواجهات بحيث تقدم مرونة عالية في التطوير والتخصيص لتدعم جميع أنواع الشاشات المتاحة

لماذا VueJS؟

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

المتطلبات

جهاز حاسب آلي متصل بالإنترنت

معرفة مسبقة بكيفية تثبيت وإدارة البرامج على نظام التشغيل لديك

معرفة مسبقة بلغة JavaScript

هذه الدورة تتوفر في مسار

مسار Front-End Development

ترتيبها ضمن المسار : 6

مسار وخطة تعليمية لتطوير واجهات المواقع باحترافية Front-end Development

منهج هذه الدورة

المدة	الدروس (76)
مقدمة الدورة وتجهيز البيئة المحلية - سنتطرق في هذا القسم لكيفية تجهيز البيئة المحلية للتطوير باستخدام Vuejs والتعرف على هذه الدورة
11:32	ماهي مكتبة vuejs ولماذا اتعلمها؟ سنتعرف في هذا الدرس على VueJs خصائها ولماذا نتعلمها ومقارنتها مع المكتبات المشابهة لها وهي React - Angular - jQuery
05:53	تثبيت حزم vuejs الأساسيه بهذا الدرس راح نثبت الحزم الأساسية الي نحتاجها بحيث نقدر نبدأ بتطوير vuejs
مقال	تحديثات جديدة على المكتبات مهم لا يوجد وصف
الأساسيات + في هذا القسم سنبدأ بتعلم الأساسيات للتعامل مع vuejs
03:42	إنشاء أول تطبيق لك الآن بعد تجهيز البيئة المحلية للتطوير، هيا نقوم بتشغيل أول تطبيق لنا
03:30	تمرير البيانات للقوالب سنتعرف الآن على كيفية تمرير البيانات للقوالب وكيفية العرض الديناميكي لها
03:10	تصميم القوالب الآن سنتعرف على طريقة متقدمة في تصميم القوالب في vuejs وكيف نحول علمنا لملف واحد فقط
03:56	تعريف الدوال والتفاعل مع المستخدمين كيف نستطيع أن نعرف دوال خاصة بنا ونتفاعل مع أحداث المستخدمين؟ يلا نشوف
02:55	تمرير البيانات للدوال جرعة إضافية حتى تصبح البرمجة ديناميكية بشكل أكبر، راح نحتاج نعرف كيف نمرر البيانات للدوال الخاصة بنا
06:44	التحكم بظهور البيانات عن طريق الشروط سنتعلم في هذا الدرس كيفية التحكم بإظهار وإخفاء العناصر من الصفحات عن طريق الشروط البرمجية التي نضعها
03:05	تكرار البيانات باستخدام for عندك بيانات كثيرة في مصفوفة؟ تعال نشوف كيف ممكن نسوي لها تكرار ونظهرها في الصفحات
07:45	Computed Properties بتتعرف بهذا الدرس على ما يسمى computed properties وهي خصائص تستخدم لقراءة البيانات
05:18	ربط السمات برمجيا binding راح نتعرف بهذا الدرس على كيفية ربط السمات attributes بشكل برمجي مع vuejs
03:34	الحصول على البيانات من النماذج بهذا الدرس راح نتعرف على كيفية الحصول على البيانات الي يكتبها المستخدم في النماذج
05:34	التحقق من صحة البيانات المستخدم أحيانا يخطئ في ادخال البيانات ويجي دورك في التحقق من صحة بياناته بهذا الدرس
05:52	ربط البيانات بالأحداث v-model بهذا الدرس راح نتعرف على v-model "الخطير" وهي احدى سمات vuejs الي تساعدنا بربط البيانات مع الأحداث في النماذج
المكونات Components + في هذا القسم سنقوم بالتعرف على vue components وهي الأجزاء الصغيرة التي نقوم بإنشائها لغاية تسهيل العمل واعادة الاستخدام والتطوير المستمر
03:46	ماهي المكونات وكيف يتم إنشاؤها؟ بهذا الدرس راح نتعرف مع بعض على components وكيف يتم إنشاؤها والفايدة منها
06:28	خصائص المكونات مع تمرير البيانات لها لو حاب مثلا تسوي تكرار داخل مكون، كيف ممكن تمرر هذي البيانات له؟ تعال نشوف
08:05	تمرير البيانات بين المكونات الرئيسية والإضافية بهذا الدرس راح نشوف كيف نمرر البيانات بين child & parent components
مشروع إنشاء المكونات والتحقق من البيانات + في هذا القسم سنقوم بتطبيق مشروع يجمع مابين components وكيفية إقامة عمليات التحقق من البيانات
03:51	المشروع الأول: ماهو المشروع؟ تمرين بهذا الدرس راح نتعرف على المشروع الي راح نسويه
09:34	الهيكل وخطة العمل للمشروع تمرين جرعة إضافية راح نشتغل بهذا الدرس بشكل نظري على أيش محتاجين بالضبط حتى نبني المشروع
05:44	إنشاء الملفات وتوصيل التطبيق تمرين هنا راح نسوي الهيكل بشكل عملي وكيف نقدر نوصل المكونات مع بعض
10:50	إنشاء عنصر الزر button component تمرين بهذا الدرس راح نسوي أول عنصر وهو عنصر الزر button
08:03	إنشاء عنصر الحقل input component تمرين الآن وصلنا مرحلة إنشاء input component وهنا راح نشوف كيف ممكن نجعل الحقول تعمل بشكل ديناميكي
19:00	التحقق من صحة البيانات validation تمرين الآن راح ندخل في طريق "طويل" ونشوف كيف ممكن تتم عملية التحقق من البيانات بشكل ديناميكي مابين العناصر المخصصة ومابين العنصر الرئيسي
06:15	تحسينات على المشروع تمرين هذا الدرس (اختياري) راح نسوي بعض التحسينات البسيطة على شكل المشروع
مشروع إنشاء صفحة عرض منتجات + في هذا القسم سوف نتطرق لكيفية إنشاء صفحة تعرض المنتجات وكيف يتم الاتصال بـ APIs
02:01	تعريف بمشروع المتجر تمرين بهذا الدرس راح نتعرف على المشروع الي راح نسويه وهو صفحة متجر ديناميكية باستخدام Vuejs
04:43	تصميم بطاقة عرض المنتجات تمرين البطاقات Cards عبارة عن مفهوم متعارف عليه في تطبيقات الويب راح نتعلم بهذا الدرس كيف نسويه
06:21	الحصول على البيانات من API تمرين بهذا الدرس راح نتعرف على كيفية عمل اتصال خارجي والحصول على معلومات من واجهات برمجة التطبيقات APIs
10:38	عرض المنتجات على الصفحة تمرين الآن وصلنا لكيفية عرض المنتجات داخل DOM
06:59	التلاعب بالبيانات بعد الحصول عليها تمرين جرعة إضافية بهذا الدرس راح نشوف طريقة للتعديل على البيانات الي نحصل عليها من API وتحويلها وتعديلها للشكل الي نحتاجه
07:45	تصميم slot components تمرين بهذا الدرس راح نتعرف على كيفية جعل المكونات components قابلة للتوسع بشكل أكبر باستخدام slots
06:41	عرض المنتجات داخل التصنيف تمرين الآن راح نشوف طريقة عرض المنتجات داخل التصنيف الواحد
07:16	تعرف على lifecycle hooks تمرين قدرت تحل المشكلة؟ بالدرس هذا راح نحل المشكلة وفوقها راح نتعرف على شيء اسمه lifecycle hooks
09:05	تصفح التصنيفات تمرين الآن راح نعرض التصنيفات المتاحة في المتجر في الأعلى مع إمكانية تصفح الموقع
05:13	ربط الكلاسات class binding تمرين بنتعرف بهذا الدرس على كيفية ربط الكلاسات بشكل برمجي مع vuejs
05:17	تحسينات على صفحة المتجر تمرين راح نضيف بعض التحسينات على شكل صفحة المتجر
التكوين Composition API + في الدروس التالي سنتعرف على Composition API وكيف يتم التعامل معها من أجل فصل المنطق البرمجي وإعادة استخدامه في المشاريع الخاصة بنا
04:36	ماهو التكوين ومافائدة استخدام Composition API راح ناخذ بهذا الدرس مقدمة عن التكوين قبل مانبدا بالأكشن
04:54	ضبط المكون راح نتعرف الآن على الضبط الأولي للمكون عندنا من خلال استخدام setup
04:38	النظام التفاعلي باستخدام ref كيف يصبح لديك نظام تفاعلي في حال حبيت تغير بيانات معينه؟ راح نشوف الآن كيف يتم عن طريق استخدام ref
04:39	النظام التفاعلي باستخدام reactive الكائنات تختلف عن البيانات البدائية primitives لذلك ولها طريقة بالتعامل معها عن طريق استخدام reactive هنا
02:35	استخدام computed values تعرفنا سابقا على computed values لكن كيف نقدر نستخدمها الآن في Composition API؟
04:52	مراقبة التغييرات عن طريق watch watchEffect جرعة إضافية بما أن Composition API تحتاج متابعة وتغيير، راح نتعرف على دوال لمراقبة التغييرات التي تحصل في البيانات عندنا
03:02	الدمج بين composition و options API جرعة إضافية هل تحتاج انك تدمج بين options و composition؟ بهذا الدرس راح نشوف كيف الطريقة الي ممكن تسوي هذا الشيء فيها وكيف ممكن تستخدم وظائف خاصة في Composition API
04:44	عزل المكون واستيراده مهم الآن راح نشوف أهميتها وفائدتها بعد ماتعلمناها كيف نقدر نفصلها ونستفيد منها في أكثر من مكان، نفصل مين؟ نفصل المنطق الي سويناه قبل
الموجهات Vue Router + في هذا القسم سنتعلم كيفية التوجيه في vuejs وذلك من خلال تحميل مكونات معينة عند فتح روابط محددة في التطبيقات
05:28	ماهو Vue Router وطريقة تثبيته بهذا الدرس راح نتعلم ايش معنى routing وكيف نثبت vue-router
05:00	إنشاء ملف التوجيه بهذا الدرس راح نعرف كيف نقدر نسوي ملف للتوجيه في التطبيق وكيف يتم تعريف الموجهات routers
06:42	ربط وعرض الموجهات قدرت تربط الموجهات بعد البحث؟ تعال نشوف كيف ممكن نسويه الآن
06:28	الموجهات الفرعية Route Children بهذا الدرس راح ندخل أعمق في الموجهات وهي الموجهات الفرعية التابعة لموجه معين في التطبيق
10:04	إنشاء الموجهات بشكل ديناميكي تمرين من الصعب أنك تعرف كل route لحاله في بعض الحالات لما تكون البيانات ديناميكية، بهذا الدرس راح نشوف كيف ممكن نسوي هذا الشغل
05:47	حماية الموجهات عن طريق beforeRouteEnter Security مهم يوجد حالات معينة لا ترغب في فتح رابط معين مثل أن المستخدم ماعنده صلاحية أو لم يقم بتسجيل الدخول، وهذا ما سوف نتعلمه الآن
نمط إدارة البيانات Vuex + سنتعلم في الدروس القادمة نمط تصميم Design Pattern خاص بمكتبة vuex التي تتيح لنا التحكم بشكل عمومي للبيانات داخل التطبيقات
15:26	مقدمة حول vuex وإدارة البيانات statement مهم سنتطرق بهذا الدرس لشرح vuex والدخول لمفاهيم في نمط التصميم المتبع بها وفائدتها وماهي mutations و actions
05:10	إنشاء store للبيانات والوصول لها بهذا الدرس سنقوم بتطبيق vuex من خلال إنشاء مركز تحكم ونتعلم كيفية الوصول للبيانات من خلالها
06:40	التعامل مع mutations تستخدم mutations للتعديل على البيانات وبنشوف الآن كيف ممكن نستفيد منها من خلال استخدام commit method
09:33	التعامل مع vuex actions vuex actions هي طريقة لضبط المنطق البرمجي في التطبيقات بحيث يتم من خلالها فقط عمل الإجراءات المعقدة بدلا من الاستناد الدائم على mutations
دعم تعدد اللغات vue-i18n + سنتعلم بالدروس القادمة كيفية دعم تعدد اللغات في تطبيقات vuejs
06:03	ماهو تعدد اللغات وكيفية تثبيت حزمة i18n بهذا الدرس راح نتعرف على المقصود بتعدد الترجمات وكيفية تثبيت وتشغيل مكتبة i18n للترجمة
05:10	فصل ملفات الترجمة بملفات Json مستقلة جرعة إضافية من الجيد أن تكون الترجمات عندك مستقلة في ملفات خاصة بكل لغة بحيث يسهل إدارتها وتحريرها وتنسيقها
03:15	تبديل اللغة بشكل ديناميكي بهذا الدرس سنتعلم كيفية تبديل اللغة ديناميكيا دون الحاجة لتعديل ملف الترجمة الأساسي
03:15	حفظ إعدادات اللغة تمرين UX لتحسين تجربة المستخدم، من الأفضل ان نحفظ إعدادات اللغة بشكل دائم للمستخدم في المتصفح
09:25	ترجمة المكونات والطريقة الصحيحة لها تمرين بهذا التمرين راح ناخذ أكثر من فكرة عن الترجمة وكيف نترجم مكون موجود
06:52	تنسيق الجُمل في الترجمات في حال كان لديك جملة طويلة تحتوي على كلمات متغيرة ستجد هذه الخاصية مفيدة جدا لك
05:26	ترجمة صيغة الجمع Pluralization UX راح نتعلم بهذا الدرس كيفية ترجمة صيغة الجمع مثل (لا يوجد أحد - يوجد شخص واحد - هناك 3 أشخاص)
مشروع متكامل لبناء تطبيق مع API + في الدروس التالية سنقوم ببناء مشروع متكامل مع مكتباته والتواصل مع API خارجية وتعلم بعض الممارسات البرمجية الهامة
02:47	مالذي سنقوم ببناؤه في هذا المشروع بهذا الدرس راح نتعرف على المشروع الي راح نسويه وهو عبارة عن SPA مرتبط بواجهة برمجة خارجية API
04:58	إنشاء المشروع وتثبيت كل الحزم المطلوبة سنقوم بهذا الدرس بإنشاء المشروع وتثبيت كل الحزم التي سنحتاج لها فيه
08:00	إنشاء الموجهات وربط المكونات بها Routes & Components بهذا الدرس راح نشتغل على إنشاء Routes ونربط فيها المكونات المخصصة Components
10:01	إنشاء مكون منفصل للقوائم واضافة مكتبات للتصميم بهذا الدرس راح نسوي navbar بملف منفصل وإضافة مكتبات تساعدنا في التصميم
02:54	ضبط القائمة العلوية ديناميكيا باستخدام المصفوفات القوائم العلوية أحيانا تأتي من قواعد البيانات وراح نتعرف على كيفية ضبط القوائم ديناميكيا من خلال المصفوفات
12:09	تجهيز مكون للربط مع API سنتعلم في هذا الدرس كيفية إنشاء مكون خاص بـ API بحيث يمكننا اعادة استخدامه في كل مكان نحتاجه
06:06	mounted VS beforeRouteEnter Security مهم بهذا الدرس راح نشوف الفرق الحقيقي بين mounted و beforeRouteEnter
11:22	استخدام vuex وخوارزمية توليد صور عشوائية جرعة إضافية الآن سنقوم بكتابة خوارزمية بسيطة لتوليد صور عشوائية لنا وعرضها في الصفحة
12:21	تصميم صفحة المنشورات الآن سنقوم بالحصول على المنشورات من API ثم تصميم الصفحة بشكل أفضل
08:27	الحصول على منشور واحد مع تعليقاته تمرين جرعة إضافية الآن سنتعرف على كيفية الحصول على المنشور والتعليقات الخاصة به وفكرة إضافية للحصول على المعلومات بشكل أفضل
11:46	تخصيص مكون لعرض البطاقات تمرين لآن البطاقات نستخدمها كثير في التطبيق، راح نستفيد من الي تعلمناه سابقا ونسوي custom component
12:43	الحصول على المستخدمين وعرض معلوماتهم وصلنا لكيفية عرض المستخدمين في الصفحة مع الاستفادة من الدالة السابقة لتوليد الصور العشوائية بهذا الدرس
02:25	تحسين شكل شريط التنقل سنقوم بهذا الدرس بتحسين شريط التنقل
03:12	إطلاق المشروع مهم كيف تطلق مشروعك بعد الانتهاء من البرمجة؟ هذا ماسوف نتعلمه الآن
مقال	تحميل المشروع هدية حمل مشروع الدورة من هنا
عرض الكل + إخفاء الكل -

دورات يوصى بها

دورة البرمجة باستخدام جافا سكريبت Javascript

دورة برمجة صفحات الويب باستخدام Vue.js

vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين على مواقع الإنترنت Interactive Front-End

469 ر.س.

إضافة للسلة

469 ر.س.

المستوى : متوسط

مدة الدراسة : من 2 ~ 4 أسابيع

الدروس : 76

التمارين : 23

الوقت المُسجل : 08:05:00 ساعات

آخر تحديث : 2022/05

وصول دائم للمحتوى

ستحصل على شهادة

اسأل المدرب في أي وقت

متابعة مشاريعك مع المدرب

تسويق سيرتك الذاتية ومشاريعك

مشاريع مميزة لطلاب الدورة

free API

بعد إكمال دورة الـ vue js وكذلك دورة لارفل API سويت هذا المشروع لتطبيق أغلب المفاهيم الي درستها في الدورتين بديت بإنشاء API لارفل لتسجيل مستخدم ونشر صور وحذفها وشرحت طريقة الربط وتجربة هذا API عن طريق صفحات بنيتها بـ vue.js ملاحظة : لحد يدقق على اللغة :)

@Azooz77758

عرض جميع مشاريع هذه الدورة

مجتمع الدورة

vite مايحدث الصفحة تلقائي

@abdulrahmannasser منذ سنتين

الذهاب إلى مجتمع هذه الدورة

المدرب

عبدالمجيب محمد الحميد

مدرب في فلكس كورسز وقائد فريق التطوير والبرمجة في هذا الموقع الرائع. إذا كنت ترغب بمعرفة المزيد عني يمكنك زيارة موقعي الشخصي.

المزيد ...

الآراء

تحميل المزيد

دورة برمجة صفحات الويب باستخدام Vue.js

vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين على مواقع الإنترنت Interactive Front-End

ماهي مكتبة vuejs ولماذا اتعلمها؟

ماذا سنتعلم في هذه الدورة؟

الجمل الشرطية conditions

التكرار Loops

التعامل مع البيانات وربطها Data binding

استخدام المتغيرات و انشائها Variables

استخدام العناصر المعدة مسبقا Components

التعامل مع أحداث المستخدم User Events

I18N لتعدد اللغات

التعامل مع Vuex

التحقق من صحة البيانات Validation

واجهة التكوين Composition API

الموجهات Vue Router لبناء صفحات متعددة

التواصل مع واجهات برمجية خارجية APIs

مشروع إنشاء صفحة متجر

وصف الدورة

المتطلبات

هذه الدورة تتوفر في مسار

مسار Front-End Development

منهج هذه الدورة

مقدمة الدورة وتجهيز البيئة المحلية -

الأساسيات +

المكونات Components +

مشروع إنشاء المكونات والتحقق من البيانات +

مشروع إنشاء صفحة عرض منتجات +

التكوين Composition API +

الموجهات Vue Router +

نمط إدارة البيانات Vuex +

دعم تعدد اللغات vue-i18n +

مشروع متكامل لبناء تطبيق مع API +

دورات يوصى بها

دورة برمجة صفحات الويب باستخدام Vue.js

مشاريع مميزة لطلاب الدورة

free API

مجتمع الدورة

المدرب

عبدالمجيب محمد الحميد