خريطة لتعلم الـ Vuejs مع بعض النصائح!!

هذه المادة قابلة للتحديث من وقت لآخر…

Vuejs عبارة عن مكتبة Front-End تستخدم في برمجة واجهات برمجيات الانترنت, لها مثيلاتها كـ React و Angular في هذه النصوص أود عرض صورة مبسطة وسريعة لتعلم Vuejs.

الشئ الأول والذي يتوجب فهمه على أي مطور برميجات انترنت هو أن يجد سبيل او طريقة مناسبة لتعلم لغة JavaScript أولا. وبما أن هذه المقالة لن تخوض في ماهية كيفية تعلم الـ JavaScript لكن سأشير لبعض النقاط للشئ المطلوب منك والذي يساعدك أيضا في تعلم Vuejs سريعا.

ستحتاج أولا كيفية التعامل مع المتغيرات في JavaScript ايضا ستحتاج كيفية التعامل مع المصفوفات واللغة كائنية التوجه Arrays and OO

ثانيا ستحتاج لتعلم كيفية التعامل مع الأساليب Functionsوهذه مهمة جدا لأنك ستحتاجها في الـ Vuejs

ثالثا ستحتاج للتعامل مع الـ Promises والتعامل مع HTTP

رابعا: من النادر جدا ان تتعامل الـ DOM في Vuejs لأن طبيعة عمل الـ Vuejs هوالتخلص من التعامل بصورة مباشرة مع ال DOM.

دعنا الآن ننتقل لخريطة تعلم Vuejs:

أولا: قم بإنشاء صفحة HTMLعادية وأنشئ ملف js داخل نفس المجلد الذي قمت بإنشاء صفحة الـ HTML بداخله

صفحة الـ HTML ستكون كالتالي:

<div id="name">
  The Result: {{ name }}
 - {{ secondName() }}
</div>

داخل ملف الـ js قم بكتابة التالي

const Name= {
  data() {
    return {
      name: 'My name is, ';
       secondname: 'Mohammed'
    }
  }
,
method: {
secondName() {
retuen this.secondname
      }
   }
}
Vue.createApp(Name).mount('#name')

قم بتجرية الصفحة على المتصفح لديك.. ليس بالضرورة ان تفهم ماذا يفعل هذا الكود.. فقط قم بتجربته على متصفحك… هذه هي الـ Vuejs السطر الأخير في الشفرة السابقة هو عبارة عن تنفيذ للـ Vuejs  وما تراه في الوسط عبارة عن أسطر JavaScript وما تراه في المقدمة عبارة عن أسطر HTML

حسنا خريطتنا الآن أصبحت واضحة.. الآن لقد قمت بتجربة الـ Vuejs بنفسك ماذا بعدها

1. قم بالدخول للموقع الرسمي https://v3.vuejs.org/guide/introduction.html#introduction وأبدا في قراءة الصفحة الموضحة في الرابط أعلاه.
2. الشئ الثاني ستحتاج لمعرفة التعامل مع الـ Data Binding
3. ستحتاج لمعرفة التعامل مع الـ Directive
4. كيفية التعامل مع الجمل الشرطية في الـ Vuejs وهي تسمى الـ Repeat Directive
5. معرفة التعامل مع الـ  Events
6. كيفية التعامل مع الـ Forms
7. كيفية التعامل مع الـ Components هذه هي النقطة الأهم والتي تعني أنك الآن أصبحت جاهز للتعامل مع مشروع من النوع الوسط
8. كيفية التعامل مع الـ HTTP وهناك عدة خيارات سواء بإستخدام الأساليب المضمنة في لغة الـ JavaScript او بإستخدام مكتبات خارجية ك Axios وهي اشرهم (تستخدم مع React أيضا)
9. كيفية التعامل مع الـ  State Management وهو ما يعني حفظ بعض البيانات في الجلسة Session لجلسات أخرى وحمل تلك البيانات لصفحات أخرى.
10. النقطة قبل الأخيرة، ستحاج للتعامل مع مفهوم الـ Routing للتنقل بين الصفحات والصفحات هنا تعني للتنقل بين الـ Components
11. أخيرا ستحتاج لمعرفة كيفية نشر التطبيق الذي قمت بإنشاءه بالتالي أنصحك بالتعامل مع Docker وكيفية تهيئة ملف الـ DockerFile

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

هنالك كورس على موقع Udemy ويعتبر أفضل كورس لتعلم الـ  Vuejs بعد الـ Documentation الرسمية.. بإمكانك شراء الكورس من هنا

https://www.udemy.com/course/vuejs-2-the-complete-guide

تحياتي – محمد