دورة مكثفة في فيو

أتقن فيو 3 بسرعة مع هذه الدورة المكثفة. ابنِ تطبيق مهام حقيقي باستخدام النماذج التفاعلية، المكونات، إدارة الحالة، وlocalStorage. تعلم أنماط واجهة مستخدم نظيفة، التحقق، والتصحيح لنشر ميزات أمامية موثوقة وحديثة بثقة.

معاينة الشهادة Elevify للشركات

ماذا ستتعلم:

دورة فيو المكثفة تقدم مسارًا سريعًا وعمليًا لبناء واجهات فيو 3 حقيقية. تعلم المفاهيم الأساسية، الحالة التفاعلية، v-model، والتحقق من صحة النماذج، ثم انتقل إلى المكونات، الخصائص، والحالة المحلية. ستتعامل مع القوائم، تغييرات الحالة، التصميم، الوصولية، والتفاعلات الدقيقة، بالإضافة إلى الحفظ بـlocalStorage، التصحيح بأدوات فيو، والنشر البسيط ليكون تطبيقك جاهزًا للإطلاق.

كيف تدرس بشكل عملي دورة مكثفة في فيو

كيف تتدرب عملياً دورة مكثفة في فيو

لك إذا كنت شركة وتريد تدريب فريقك

في Elevify للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.

اضغط هنا

محتوى الدورة

7 فصول • 36 دروسمدة بين 4 و 360 ساعة (أنت تقرر)

الفصل 1عرض التفاصيل

مفاهيم Vue 3 الأساسية وإعداد التطبيق

الدرس 1 • هيكل الملف الواحد مقابل القوالب المضمنة في HTML العادي
قارن بين مكونات الملف الواحد والقوالب المضمنة في HTML العادي. تعلم كيف يؤثر كل نهج على الأدوات، إعادة الاستخدام، وخطوات البناء، ومتى يكون من المناسب البدء بعلامات السكريبت البسيطة أو الانتقال إلى إعداد SFC كامل.
الدرس 2 • استخدام Composition API مقابل Options API (التركيز على Options API لهذه المهمة)
استكشف متى ولماذا تستخدم Composition API أو Options API. يركز هذا القسم على Options API، موضحًا كيفية هيكلة المكونات، مع شرح كيفية مقارنة Composition API من حيث إعادة الاستخدام وقابلية التوسع.
الدرس 3 • التعامل مع الأحداث باستخدام v-on / @ وتعريف الطرق
تعلم كيفية التعامل مع أحداث DOM في Vue باستخدام v-on وقصيرته @. يغطي هذا القسم تعريف الطرق في Options API، تمرير الوسائط، استخدام تعديلات الأحداث، وتنظيم منطق الأحداث بشكل منظم وقابل للاختبار.
الدرس 4 • إنشاء وتركيب تطبيق Vue 3 (CDN مقابل إعداد البناء)
افهم كيفية إنشاء وتركيب تطبيق Vue 3 باستخدام إعدادات CDN وبناء. تعلم API createApp، تكوين المكون الجذر، أهداف التركيب، ومتى تنتقل من علامات السكريبت البسيطة إلى تدفق عمل مبني على الربط.
الدرس 5 • بناء القوالب: الاستبدال، التوجيهات (v-for، v-if، v-show)، والربط (: و v-bind)
غوص في بناء Vue القوالب، بما في ذلك استبدال النص، التوجيهات الأساسية، والربط. تعلم كيفية عمل v-for، v-if، و v-show، كيفية ربط السمات والفئات، وكيفية الحفاظ على القوالب قابلة للقراءة والصيانة.
الدرس 6 • دالة data(): شكل الحالة التفاعلية وأفضل الممارسات
تعلم كيفية تعريف دالة data() لحالة المكون في Options API. افهم كيفية عمل التفاعلية، كيفية إرجاع كائنات عادية بأمان، تنظيم الحالة المتداخلة، وتجنب الأنماط الشائعة الخاطئة التي تسبب أخطاء أو ارتباكًا.

الفصل 2عرض التفاصيل

النماذج التفاعلية، v-model، والتحقق من صحة النموذج

الدرس 1 • أنماط التحقق البسيطة من جانب العميل (فحوصات مطلوبة متزامنة)
استكشف التحقق البسيط المتزامن من جانب العميل لنماذج Vue. نفذ فحوصات مطلوبة، قواعد الطول الأساسية، والأنماط البسيطة بدون مكتبات خارجية، وتعلم عرض رسائل الخطأ داخل النموذج وتعطيل الإرسالات غير الصالحة.
الدرس 2 • إنشاء معرفات فريدة للعناصر (الطابع الزمني، العداد، بدائل UUID)
افهم استراتيجيات إنشاء معرفات فريدة مستقرة لعناصر القوائم وحقول النموذج. قارن بين الطوابع الزمنية، العدادات المتزايدة، وبدائل UUID الخفيفة، وتعلم متى تتجنب الاعتماد على فهارس المصفوفة كمفاتيح.
الدرس 3 • الربط الثنائي الاتجاه بـ v-model للنص، التحديد، والمدخلات المخصصة
أتقن الربط الثنائي الاتجاه بـ v-model على المدخلات الأصلية، التحديدات، والمكونات المخصصة. تعلم كيفية عمل التعديلات، كيفية مزامنة الخصائص والإصدارات في الحقول المخصصة، والتعامل مع الحالات الحدية مثل المربعات والراديو.
الدرس 4 • منع إرسال النموذج الافتراضي والتعامل مع الأحداث بشكل صحيح
تعلم كيفية اعتراض إرسال النموذج الأصلي، منع إعادة تحميل الصفحة، والتعامل مع أحداث الإدخال والإرسال في Vue. ستوصل الأحداث بتعديلات، الوصول إلى بيانات الأحداث، والحفاظ على المنطق في طرق معالجة نظيفة.
الدرس 5 • إدارة حالة النموذج داخل data() ومسح/إعادة تعيين الحقول
تعلم تخزين حالة النموذج في data()، تهيئة القيم الافتراضية، وإعادة تعيين أو مسح الحقول بعد الإرسال. ستدير حالة النظافة مقابل القذارة والحفاظ على القوالب متزامنة مع البيانات الأساسية.

الفصل 3عرض التفاصيل

المكونات، الخصائص، وإدارة الحالة المحلية

الدرس 1 • أنماط تواصل المكونات الخفيفة (الإصدار، بيانات الأحداث)
اكتشف طرقًا خفيفة الوزن لتواصل مكونات Vue بدون حلول عالمية معقدة. ستستخدم الإصدارات، بيانات الأحداث، والتحقق لتمرير المعلومات صعودًا، مع الحفاظ على انفصال المكونات مع سهولة التنسيق.
الدرس 2 • حالة المكون المحلية مقابل الحالة المدارة من الوالد واختيار الملكية
استكشف كيفية اتخاذ قرار مكان يعيش الحالة في تطبيق Vue. قارن بين حالة المكون المحلية والحالة المدارة من الوالد، تعلم تجنب التكرار، وتصميم قواعد ملكية واضحة تحافظ على تدفق البيانات متوقعًا وقابلًا للصيانة.
الدرس 3 • تقسيم واجهة المستخدم إلى مكونات: الرأس، نموذج إضافة المهمة، قائمة المهام، بطاقة المهمة
ممارسة تفكيك تطبيق صغير إلى مكونات Vue مركزة. ستصمم رأسًا، نموذج إضافة مهمة، قائمة مهام، وبطاقة مهمة، مع تحديد المسؤوليات، حدود البيانات، ومسارات التواصل بين كل قطعة.
الدرس 4 • تمرير البيانات بالخصائص وإصدار الأحداث إلى مكونات الوالد
افهم كيفية تمرير البيانات صعودًا بالخصائص وإرسال المعلومات صعودًا بالأحداث. ستعرف عقود الخصائص، التعامل مع الافتراضيات والتحقق، وإصدار الأحداث حتى يتمكن الآباء من الرد على إجراءات المستخدم بشكل نظيف.
الدرس 5 • استخدام v-for مع المكونات وترقيم القوائم بشكل صحيح
تعلم عرض قوائم ديناميكية من المكونات بـ v-for مع تجنب الفخاخ الشائعة. ستفهم لماذا المفاتيح مطلوبة، كيفية اختيار مفاتيح مستقرة، وكيف يؤثر الترقيم السليم على الأداء، التفاعلية، وتجربة المستخدم.

الفصل 4عرض التفاصيل

الطرق، الخصائص المحسوبة، والحالة المشتقة

الدرس 1 • اعتبارات الأداء للخصائص المحسوبة وعرض القوائم
افحص جوانب الأداء للخصائص المحسوبة وعرض القوائم. تعلم كيف يساعد التخزين المؤقت، تجنب إعادة الحساب غير الضرورية، وتحسين القوائم الكبيرة بالمفاتيح، التصفح، واستخراج المكونات.
الدرس 2 • تعريف الطرق للإجراءات: addTask، deleteTask، advanceStatus
عرف طرق Vue التي تغير قوائم المهام بطريقة متوقعة. ستطبق إجراءات الإضافة، الحذف، وتغيير الحالة، التعامل مع الحالات الحدية، والحفاظ على المنطق قابلًا لإعادة الاستخدام، الاختبار، والتكامل مع القالب.
الدرس 3 • الخصائص المحسوبة للقوائم المصفاة بناءً على مرشح الحالة
استخدم الخصائص المحسوبة لاستخراج قوائم مهام مصفاة من مرشح حالة. تعلم الحفاظ على مصدر الحقيقة أدنى، تجنب تكرار الحالة، وعرض getters واضحة وقابلة لإعادة الاستخدام لقوالبك ومكوناتك.
الدرس 4 • ملخصات محسبة: إجمالي العدد والعدد لكل حالة
أنشئ ملخصات محسبة مثل إجمالي عدد المهام والعدد لكل حالة. تعلم تجميع البيانات بكفاءة، تجنب التسجيل اليدوي، وعرض بيانات الملخص للقوالب للشارات، لوحات التحكم، ومؤشرات التقدم.
الدرس 5 • متى تستخدم المحسوب مقابل الطرق مقابل المراقبين
افهم متى تستخدم الخصائص المحسوبة، الطرق، أو المراقبين للحالة المشتقة. قارن سلوكها، التخزين المؤقت، والتأثيرات الجانبية لاختيار الأداة المناسبة لعرض البيانات، الردود، والتدفقات غير المتزامنة.

الفصل 5عرض التفاصيل

عرض القوائم، الضوابط، والتفاعلات مع واجهة المستخدم

الدرس 1 • عرض المهام كصفوف جدول أو بطاقات بـ v-for والفئات الديناميكية
تعلم عرض مجموعات المهام كجداول أو بطاقات باستخدام v-for. ستدير المفاتيح، الفئات الديناميكية، والتخطيطات الشرطية، وتقرر متى تستخدم الجداول الدلالية مقابل شبكات البطاقات المرنة لبياناتك.
الدرس 2 • أنماط تأكيد الحذف والتحديثات المتفائلة لواجهة المستخدم
استكشف تدفقات تأكيد الحذف التي توازن بين السلامة والسرعة. قارن بين النماذج، داخل النص، وأنماط التراجع، نفذ إزالة UI متفائلة، وتعامل مع فشل API مع الحفاظ على استجابة الواجهة.
الدرس 3 • أساسيات الوصولية: الأزرار، التسميات، ودلالات النموذج
افهم أساسيات الوصولية لواجهات مهام تفاعلية. ستستخدم أزرار دلالية، تسميات، وضوابط نماذج، تدير التركيز، وتضيف سمات ARIA حتى يتمكن مستخدمو لوحة المفاتيح والتقنيات المساعدة من تشغيل تطبيقك.
الدرس 4 • تنفيذ منطق دورة الحالة (todo → doing → done → todo) بأمان
تعلم تنفيذ انتقالات حالة متوقعة لعناصر المهام باستخدام حالة Vue. ستتعامل مع أحداث النقر، حماية الانتقالات غير الصالحة، مزامنة UI والبيانات، وكتابة منطق يظل سهل التوسع والاختبار.
الدرس 5 • ربط الفئات والأنماط شرطيًا بناءً على الأولوية/الحالة
اكتشف كيفية ربط الفئات والأنماط في Vue بناءً على أولوية المهمة والحالة. ستستخدم v-bind:class و v-bind:style، تحسب حالات العرض، وتحافظ على قواعد العرض مركزية وقابلة للصيانة.

الفصل 6عرض التفاصيل

استمرارية الحالة، التصحيح، وتدفق عمل المطور

الدرس 1 • مزايا وبيعة البناء السريع مقابل نشر CDN وكيفية إعداد HTML قابل للتشغيل
استكشف متى تستخدم بناءات سريعة أو روابط CDN لـ Vue 3، كيف يؤثر كل منهما على الأداء، التخزين المؤقت، و DX، وكيفية تجميع ملف HTML أدنى قابل للتشغيل يحمل تطبيقك بأمان في بيئات مختلفة.
الدرس 2 • اختبار واجهة المستخدم يدويًا: خطوات إعادة إنتاج الإضافة/التغيير/الحذف والتصفية
ممارسة اختبار واجهة Vue 3 يدويًا بتحديد سيناريوهات واضحة للإضافة، التغيير، الحذف، والتصفية، توثيق خطوات إعادة الإنتاج، وفحص الحالات الحدية للحفاظ على استقرار التدفقات الشائعة مع الوقت.
الدرس 3 • تسجيل الكونسول، معالجة الأخطاء، وتنقية الإدخال البسيطة
افهم كيفية استخدام تسجيل الكونسول بفعالية، التقاط وعرض الأخطاء، وتطبيق تنقية الإدخال البسيطة لتجنب الانهيارات، السجلات الصاخبة، والمشكلات الأمنية الأساسية في مهام تطوير Vue 3 اليومية.
الدرس 4 • أنماط الحالة في الذاكرة واستخدام تخزين المتصفح (localStorage) للاستمرارية البسيطة
تعلم أنماط إدارة الحالة في الذاكرة في Vue 3 وكيفية عكس البيانات الرئيسية إلى تخزين المتصفح مثل localStorage، مع الحفاظ على مزامنة الحالة، استعادتها عند التحميل، وتجنب فخاخ الاستمرارية الشائعة.
الدرس 5 • Devtools وتقنيات التصحيح لتطبيقات Vue 3 (استخدام Vue Devtools)
تعلم كيفية تثبيت، تكوين، واستخدام Vue Devtools لفحص المكونات، تتبع الحالة، مراقبة الأحداث، والسفر عبر الزمن في التغييرات، مما يجعل تشخيص المشكلات وفهم سلوك تطبيق Vue 3 أسهل.

الفصل 7عرض التفاصيل

التنسيق، تلميع تجربة المستخدم، وأنماط CSS الأدنى

الدرس 1 • تخطيط متجاوب أدنى للرأس، النموذج، والقائمة باستخدام flexbox
بنِ تخطيطًا متجاوبًا أدنى للرأس، النموذج، والقائمة باستخدام flexbox. ستوجه العناصر، تتعامل مع الالتفاف، وتعرف نقاط التوقف بـ CSS بسيط يحافظ على قابلية استخدام واجهة Vue على الهواتف والحواسيب.
الدرس 2 • كتابة CSS مدمج وقابل للصيانة في علامة style
اكتشف كيفية كتابة CSS مدمج وقابل للصيانة داخل مكونات Vue الملف الواحد. ستقيد الأنماط، تعرف فئات أدوات قابلة لإعادة الاستخدام، تتجنب التكرار، وتحافظ على كتل الأنماط منظمة للنمو طويل الأمد.
الدرس 3 • مزايا التصميم المعتمدة على السرعة والوضوح
استكشف المزايا العملية في التصميم التي تفضل السرعة، الوضوح، وبساطة التنفيذ. ستتعلم متى تبسط العناصر البصرية، تقلل الخيارات، وتقبل القيود للحفاظ على سرعة واجهة Vue وفهمها.
الدرس 4 • إشارات بصرية للأولوية والحالة (الألوان، الأيقونات، التسميات)
تعلم التواصل عن أولوية المهمة والحالة باستخدام اللون، الأيقونات، والتسميات. ستصمم لغة بصرية واضحة، تطبقها باستمرار في قوالب Vue، وتضمن الوصولية بالتباين والإشارات غير اللونية.
الدرس 5 • التفاعلات الدقيقة: الحالات المعطلة، مؤشرات التحميل، وإدارة التركيز
أضف تفاعلات دقيقة تحسن التغذية الراجعة والتدفق. ستتعامل مع الحالات المعطلة، مؤشرات التحميل، وإدارة التركيز في Vue، مع الحفاظ على التفاعلات متجاوبة، قابلة للوصول، وبصريًا متسقة.

الشهادة

شهادتك الصالحة للتخرج

ماذا يقول طلابنا

آراء من درسوا معنا:

دروسكم مثالية. اشتريت الباقة السنوية، وأخيراً أصبح لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقومون به، لقد أوصيت بكم لأشخاص آخرين...