سنتعرف على مسار تطوير مواقع الويب باستخدام اطار Vue.js وخريطة الطريق . السلام عليكم مرحباً بكم اليوم معنا لكم شرح بسيط وسهل جداً طريقة تطوير مواقع الويب باستخدام Vue.js تابع الشرح وبتعرف ان شاء الله كيف تتعامل مع الاوامر..
وبتعرف ان الموضوع سهل جداً ومافيه اي صعوبة .
يعد vue js framework أحد أشهر وأقوى أطر عمل جافا سكريبت التي تسمح لنا بتطوير صفحات ومواقع ويب "SPA" ، وهي اختصار لـ "تطبيق الصفحة الواحدة" ، وهي طريقة لإرسال البيانات واستلامها على الفور دون إعادة تحميل الصفحة. إعادة تحميل الصفحة.
ماهو vue js ومن طورها ؟
تم تطوير إطار vue js بواسطة Youyuxi ، وهو شائع بين المطورين حول العالم ولديه مجتمع مطور كبير ، مما يدل على أنه بالإضافة إلى المجتمع الذي يمكنه الإجابة على جميع أسئلتك في أي وقت ، هناك العديد من الموارد التعليمية.الخطوات التي يجب اتباعها لتصبح مطور Vue.js
ستتعلم معنا كيف لك ان تصبح مطور Vue.js ، من الصفر إلى المراحل المتقدمة من Vue بينما نمضي قدمًا ببركة الله.
1- تعلم Html Css
2- تعلم javascript
نظرًا لأن Vue.js يعتمد على جافا سكريبت ، فأنت بحاجة إلى تعلم الأخير قبل تعلم vue ، وأعني بـ الجافا سكريبت تعلم js و js bom و js dom و ES6 و js oop و Typescript ، وبعد ذلك تكون جاهزًا للانتقال إلى الخطوة التالية .
3- تعلم cmd
4- تعلم اساسيات Vue.js
هنا يجب أن نعرف و تتعلم ماهي أساسيات vue ، مثال ذلك كيفية إنشاء Vue Instance ، وكيفي يستخدم Data Binding و Two Way Data Binding لمعالجة البيانات ، وطريقة استخدام العرض الشرطي و كذاك عرض القائمة لـ عرض المعلومات و البيانات ، و التحكم في فئات css باستخدام ربط الفصل والأنماط.5- تعلم Vue CLI
كما ذكرت للتو ، فإن العمل مع cli في vue.js مهم جدًا لأنه يمكنك من خلاله إنشاء الدعائم والمكونات وإنشاء اتصال بينها ، بالإضافة إلى تعلم مفاهيم جديدة مثل القوالب و SLOTS.6- التعامل مع Forms
form هو عنصر من عناصر HTML تتمثل مهمته في إرسال البيانات عند تسجيل الدخول أو الاتصال بنا . ويجب ان نتعرف على انواع ال forms في vue وكيف يمكن استخدامها وماهي طرق الحماية بال validation وكيفية استقبال بياناتها .
7- تعلم Vue Router
ال routing التوجيه مهم جدا في vue فهو مسئول عن التنقل بين صفحات الموقع ، مهم جدا في مفهوم SPA ، دوره إظهار وإخفاء مكونات الموقع حسب طلب المستخدم. على سبيل المثال ، إذا انتقل إلى / حول ، فقم بإظهاره حول أحد المكونات ، على سبيل المثال.
8- تعلم Vue Lifecycle Hooks
إنها مجموعة من الأساليب التي تمكنك من عرض بيانات في الصفحة بناء على حالة معينة من عمر Vue Instance . وهذه هي أفضل الطرق الحالية المعروفة :
beforeCreate
- Created
- before Mount
- mounted
- before Update
- updated
- before Unmount
9- التعامل مع الـ api
10-تعلم Composition API
هذا الإضافة اضيفت في vue 3 ومهمتها هي جعل الكود قابل لإعادة الاستخدام reusable بهدف تبسيط المكونات المعقدة وعن طريق دالة Setup استخدام خصائص Composition API في ال components الخاصة بصفحتك .
11- تعلم Vuex State Management
ال Vuex هي مكتبة تعتمد على State Management وهو نظام أو ميزة يمكنك من مشاركة البيانات بين جميع ال components في موقعك بفضل مجموعة من Objects تخزن في ملف يسمى Store . وهي ضرورية جدا في المشاريع الكبيرة والمتوسطة .
في النهاية من الأفضل ان تتعلم التقنيات الاخرى والتي سوف تاخذ بيدك و تساعدك مثل الـ testing و ال git و json و Npm و و bootstrap او tailwind css وغير ذلك من التقنيات التي ستفيدك حتما .
مصادر التعلم
- - إذا كنت تريد أخد نظرة شاملة عن vue.js فانصحك بهذا الفيلم الوثائقي حول vue : هنــــا
- -الموقع الرسمي : هنــــا
- - مقدمة ل vue js : هنــــا
- - دورة vue.js شاملة : هــــــــنا
- - مقدمة نحو veux : هنــــــا
تعليقات
إرسال تعليق