ماهي VueJs؟
vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين مبنية على لغة JavaScript على مواقع الإنترنت تركز بشكل كبير على طبقة الواجهات بحيث تقدم مرونة عالية في التطوير والتخصيص لتدعم جميع أنواع الشاشات المتاحة
لماذا VueJS؟
جهاز حاسب آلي متصل بالإنترنت
معرفة مسبقة بكيفية تثبيت وإدارة البرامج على نظام التشغيل لديك
معرفة مسبقة بلغة JavaScript
المدة | الدروس (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 |
إطلاق المشروع
مهم
كيف تطلق مشروعك بعد الانتهاء من البرمجة؟ هذا ماسوف نتعلمه الآن |
مقال |
تحميل المشروع
هدية
حمل مشروع الدورة من هنا |
عرض الكل + إخفاء الكل - |
vue.js هي بيئة عمل لبناء واجهات تفاعلية للمستخدمين على مواقع الإنترنت Interactive Front-End
مدرب في فلكس كورسز وقائد فريق التطوير والبرمجة في هذا الموقع الرائع. إذا كنت ترغب بمعرفة المزيد عني يمكنك زيارة موقعي الشخصي.
المزيد ...