لقد قمنا ببعض التغييرات هنا !

اسمح لنا أن نعرفك على موقع نقرة بحلته الجديدة ! اختر القسم من القائمة لنوضح لك ما الذي حدث !

تنمية المحتوى العربي

الآن , أصبح تركيزنا الأكبر في نقرة على صناعة المحتوى وتعميمه , نعمل بشكل يومي لتوفير مقالات ذات جودة عالية من مصادر موثوقة لتحسين واقع الانترنت العربي, نحن في مهمة - كما الجميع - لتنمية التواجد العربي على الانترنت

لماذا ؟

قمنا ببحث بسيط , و وجدنا نتائج مخيفة ! يتحدث اللغة العربية ما يقارب 310 مليون شخص في حين أن المحتوى العربي لا يزيد عن 0.7% من محتوى الانترنت العام , و نصف هذا المحتوى محتوى غير هادف و أدنى من الجودة الحقيقية للمجتمع العربي , لذا كان لابد لأحدنا أن يتقدم في مسيرة لتحسين واقع الانترنت العربي .

خدمة سؤال و جواب

ملتزمون بدعمنا لجميع خدماتنا السابقة , لا تزال خدمة سؤال و جواب فعالة كما كانت من قبل , الفرق الوحيد هو انتقالها الى رابط فرعي على الموقع

لا تزال هذه الخدمة محل اهتمامنا كما هي محل اهتمام الكثير من مستخدمي الموقع , يمكنكم زيارة موقع خدمة سؤال و جواب من هنا , كل شيئ سيعمل كما كان في الماضي

qa.naqrah.net

ماذا عن حسابي ؟

كل شيئ تماماً كما تركته ! لا يوجد أي تغييرات في حسابات المستخدمين نهائياً

يمكنك تسجيل الدخول , تسجيل الخروج , تعديل بيانات الحساب , الاشتراك بالقائمة البريدية تماماً كما كنت تفعل سابقاً

حسابك الشخصي

تحديث السياسات

في حال كنت غائباً عن موقع نقرة لفترة طويلة , فنأمل منك اعطائنا بضع دقائق من وقتك لمراجعة سياسة الخصوصية و شروط الاستخدام للتأكد من أي تحديثات قد لم تقرأها قبلاً

سياسة الخصوصية و شروط الاستخدام

الخطوات التالية

الآن , بعد أن تعرفت على التحديثات الحاصلة في الموقع , سننتقل للخطوة التالية

نستطيع توفير مقالات مخصصة لك و تتمحور حول اهتماماتك , نحتاج منك أن تعرفنا باهتماماتك! سنفعل ذلك في الصفحة التالية ...

اختيار الاهتمامات
  • تنمية المحتوى العربي
  • خدمة سؤال و جواب
  • ماذا عن حسابي ؟
  • تحديث السياسات
  • الخطوة التالية

ما هو Vue.js ؟ درس مفصل لتعلم Vue.js للمبتدئين

ما هو Vue.js ؟ درس مفصل لتعلم Vue.js للمبتدئين

Vue.js هو اطار عمل مبني على لغة جافاسكريبت وموجه لمصممي الواجهات (Front-End Developers) , تكمن روعة وأهمية Vue.js بامكانية عمل مواقع كاملة من صفحة واحدة عبر دمج عدة مكونات Components مع بعضها البعض لتحقيق واجهة متكاملة و مضاف اليها ميزات عدة تحتاج ربما مئات السطور باستخدام جافاسكريبت العادية أو حتى jQuery.

ولطالما كان هناك سؤال اجابته محيرة نوعاً ما , ما هو Vue.js أصلاً ؟ و للاجابة بشكل صحيح على هذا السؤال علينا أولاً فهم ما معنى مصطلح اطار عمل في تصميم الويب وخاصة في جافاسكريبت.

Vue.js هو اطار عمل , ما معنى اطار العمل ؟

اطار العمل هو مصلح من المصطلحات الثلاثة الشهيرة في تصميم الويب , وهي المكتبات ( Libraries ) , أطر العمل ( Framework ) , والاضافات ( Plugins ) و حديثنا هنا عن أطر العمل , ان كنت قادم من خلفية برمجية وسمعت بلغة PHP فمن المؤكد انك تعرف اطار عمل لارافل , و قد سبق ونشرنا مقال بعنوان ما هو Laravel لارافل ؟ , بالنسبة ل Vue.js فهي تماماً كلارفل بالنسبة لجافاسكريبت , اطار عمل مبني على لغة جافاسكريبت ولو أردنا التحدث بمصطلحات علمية بحتة فان تعريف اطار العمل العلمي هو : "مجموعة من المكونات الجاهزة التي يستخدمها المبرمج في برنامج , حيث أن الهدف منها هو تكوين بنية تحتية تساعد المبرمج على اتمام مهامه بسرعة وجودة عالية" _ويكيبيديا.

فاذا واعتماداً على هذا التعريف فان Vue.js هي مجموعة من المكونات الجاهزة (دوال , كائنات ... الخ) مبنية على لغة جافاسكريبت تساعدنا كمصممي واجهات انجاز أعمالنا بسرعة وجودة أكبر :) , وهذا التعريف صحيح كلياً وخلال سطور هذا المقال سنستوضح صحة هذا التعريف ونطبقه على ما سيتم شرحه في تكملة المقال .

ما الذي يميز Vue.js عن منافسيه من أطر العمل الأخرى ؟

اضافة الى الى 5 أسباب التي تدفعك الى تعلم Vue.js فان تميز Vue.js يكمن في سهولتها الملحوظة مقارنة بالمنافسين ك Angular , React وغيرهم , اضافة الى ذلك اعتماد اطار عمل لارافل لها كاطار عمل مضمن اساساً ضمن أي مشروع لارافل جديد , وتتضح سهولتها عند التجربة , فان كنت تتقن HTML , CSS , Javscript فأنت قد أتقنت Vue.js تقريباً!

كما أن الدعم المتوفر لها عبر الانترنت شاسع وكافي لحل اي مشكلة تواجهك , فأي مشكلة قد تواجهك من المؤكد أنها قد حلت على Github , Stackoverflow او نقرة من قبل.

وأيضاً , يقول معظم محبي Vue.js ان الاضافات الموجودة فيها بشكل اساسي (تحصل عليها عند تفعيلها على موقعك) أفضل بكثير من غيرها , فبمجرد تضمين اطار العمل في مشروعك ستحصل على Vue-Router , Vuex مضمنين تلقائياً في نواة اطار العمل .

اذاً كيف نبدأ في انشاء مشروع Vue جديد ؟ ستبدأ الرحلة الآن

انشاء مشروع Vue.js جديد

عبر تضمين ملف اطار العمل

يتم تضمين Vue في مشروعك عبر طريقتين , الطريقة الأولى عبر CDN Content Delivery Network , تقوم باضافة اطار عمل Vue.js في أسفل الصفحة تماماً كأي ملف جافاسكريبت تريد تضمينه في موقعك , كما يمكنك طبعاً تنزيل Vue.js واضافتها الى ملفاتك وتضمينها والكود هو التالي:

<script src="SRC_TO_VUEJS_FILE"></script> <!-- You Can Have The Vue.js Main File By Downloading it / CDN it From vuejs.org -->

من المستبعد أن تواجه اي مشاكل باستخدام الطريقة السابقة , فهي أبسط طريقة لاستخدام اطار العمل ولا يوجد أي شيئ مميز فيها , ومن الواجب التنبيه ان Vue.js نسختين , نسخة مجهزة لعلمية التطوير ( Development Version ) ونسخة مخصصة للنشر ( Production Vesrion ) كلا النسختين يؤديان نفس المهمة على صعيد الكود , لكن نسخة التطوير تعطيك مساحة أكبر لتصحيح الأخطاء وتوضح لك رسائل الخطأ وما الى ذلك وأيضاً تعطيك الوصول لاستخدام Vue extension وهي اضافة لمتصفحات كروم وفيرفوكس والمتصفحات المبنية عليها , وسنأتي على ذكرها بشكل مفصل أكثر لاحقاً في هذا المقال.

عبر Vue CLI

الطريقة الثانية لانشاء مشروع Vue.js هي عبر Vue CLI و أحرف CLI ترمز الى Command Line Interface اي واجهة سطر الأوامر , ولا داعي للذعر هنا فالأوامر المطلوبة بسيطة جداً لانشاء مشروع جديد

1- الخطوة الأولى , تنصيب Vue على جهازك :

npm install -g @vue/cli
# OR
yarn global add @vue/cli

الأمر السابق (أحد الأمرين) يقوم بتنصيب Vue CLI على جهازك , والفكرة هنا هي أن تنصيب Vue CLI على الجهاز تساعدك في انشاء مشاريع أخرى لاحقاً , و يوجد معلومتين مهم ذكرهم هنا , امر npm لا يمكن استخدامه ان لم تكن قمت بتنصيب Node.js على جهازك , يمكنك تنصيبه كأي برنامج عادي من هنا https://nodejs.org/en/

الملاحظة الثانية موجهة لمستخدمي لينكس , قد تحتاج الى اضافة الكلمة sudo قبل أمر تنصيب Vue CLI او حتى قبل امر استخدام vue-cli لانشاء مشروع جديد , لأن لينكس يمتلك حساسية مريبة تجاه أذونات الملفات D:

2- الخطوة الثانية , انشاء مشروع جديد :

لانشاء مشروع جديد , يمكنك استخدام أمر create الذي يوفره Vue CLI الذي قمنا بتنصيبه قبل قليل , والأمر يبدو كالتالي:

vue create hello-world

سيظهر لك في سطر الأوامر هذا الشكل بعد ادخال أمر انشاء مشروع جديد , ويطلب منك هنا اختيار بيئة معينة , يوجد 3 بيئات معدة سابقاً ومن المرجح لغالب المشاريع البسيطة اختيار default اما المشاريع الأكبر فغالباً ما تختار start و ان كنت تعي تماماً ما تفعله ولديك خبرة واسعة في جافاسكريبت يمكنك اختيار Manually select features و اختيار ما تفضله .

يقدم آدم جارن , من قناة Vue Mastery شرح مفصل عن عملية انشاء مشروع جديد باستخدام Vue CLI , واليك الفيديو

كما قدمت قناة The Net Ninja قائمة تشغيل من 10 فيديوهات عن Vue CLI يمكنك مشاهدتها من هنا اما بالنسبة للمحتوى العربي , فقدم أسامة محمد من قناة Elzero Web School دورة كاملة عن Vue.js ككل , وفي الدرس الواحد و العشرين و الثاني و العشرين شرح بتفصيل عملية انشاء مشروع عبر Vue CLI والخيارات المتاحة وتفصيلها .

وفي عودة لمقالنا , سنقوم باختيار Default من سطر الأوامر عبر التنقل باستخدام الأسهم و الضغط على Enter للاختيار.

سيطلب منك بعض المعلومات الأساسية التي توضع في ملف package.json , أسم المشروع والاصدار وما الى ذلك , لا يوجد مبدأ معين هنا فقط قم بكتابة ما يتناسب مع مشروعك , ولا يهم حقاً أن تكون معلومات صحيحة أصلاً , لكن ما الذي يمنع من كتابة معلومات صحيحة ؟ القرار لك في كل الأحوال.

سيقوم سطر الأوامر بانشاء المشروع , وأكرر التذكير بأهمية الانتباه لأمر sudo هنا في حال كنت من مستخدمي لينكس , تجهيز المشروع قد يحتاج 4 الى 10 دقائق حسب سرعة الانترنت لديك , وسيقوم بتحميل ما يزيد عن 100 ميغا بايت بقليل من الملفات في مجلد node_modules , عند الانتهاء , عليك كتابة أمرين أخيرين في سطر الأوامر لمشاهدة المشروع , الأمر الأول هو الدخول الى مجلد المشروع الجديد:

cd hello-world

الأمر الثاني هو تشغيل سيرفر التطوير Development Serve عبر الأمر التالي:

npm run serve

سيؤدي هذا الى أن يقوم سطر الأوامر ببناء سيرفر تجريبي لك ستستخدمه خلال عملية التطوير , غالباً السيرفر يكون localhost:8080 وقد يختلف ال Port تبعاً للمتوفر, بمجرد دخولك على الرابط ستجد نفسك في الصفحة الرئيسية للمشروع , تهانينا!

بنية الملفات في مشاريع Vue.js

ان كنت قمت بتنصب Vue.js عبر اضافتها كملف جافاسكريبت عادي , فتخطى هذا القسم فهو موجه لمن قام باستخدام Vue CLI .

عند الدخول الى مشروعك عبر محرر أكواد ما , ستجد أمامك مجموعة من المجلدات و الملفات ونبدأ بالمجلد الأول من الأعلى متجهين الى الأسفل .

1- مجلد node_modules

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

2- مجلد public

من اسم المجلد يمكنك توقع الهدف منه , يحوي هذا المجلد النتائج النهائية للمشروع , ضمن هذا المجلد يمكنك انشاء مجلدات أخرى ك css , images , icons وغيرها وتضمينها في مشروعك , كما يحوي مجلد public ملف باسم index.html , لنقل ان هذا الملف هو الملف النهائي , لن يحوي أي أكواد حقيقة فالأكواد موجودة ضمن ال Components التي سنأتي على ذكرها خلال دقيقة , لكن يمكن في هذا الملف تضمين ملفات css الخارجية كمكتبات أو غير ذلك , كما يمكنك تغير عنوان الموقع <title> و أكواد ال <meta> وسيكون هذا الملف وكل ما فيه موحد لكل الموقع (طبعاً يمكنك التلاعب بهذا الأمر عبر المتغيرات لاحقاً)

3- مجلد src

أهم مجلد خلال مرحلة التطوير , يحوي هذا المجلد على كل شيئ تقريباً , وستجد فيه بشكل تلقائي ملف يسمى App.vue , هذا الملف هو المرادف لملف index.html في مجلد public ولكنه للتطوير , الفكرة منه هو جمع كل ال Components واستدعائها ضمنه , وفي النهاية نجد ان ملف App.vue يتم استدعائه بطريقة سحرية لملف index.html

يوجد لدينا أيضاً مجلد Components , في هذا المجلد يمكنك وضع ال Components وتقسيمها ضمن مجلدات فرعية , طبعاً يمكنك وضع ال Components اينما شئت ضمن مجلد src ولكن لا بد من التنظيم خصوصاً في المشاريع الكبيرة.

باختصار , في هذا المجلد كل ادوات التطوير من ملفات جافاسكريبت و Components و ملفات Sass وغيرها .

4- ملفات اضافية

ستجد عدة ملفات اضافة كملف package.json وغيره , غالباً لن تحتاج الى التعامل مع هذه الملفات كون أغلبها ملفات جوهرية لعمل الاطار نفسه , 100% من عملك خلال مرحلة التطوير سيكون في مجلد src .

كتابة مشروع Hello World باستخدام Vue.js

وصلنا الى المرحلة الحاسمة ! كتابة مشروع مرحباً بالعالم , لكي تستطيع كتابة أكواد Vue ستحتاج الى انشاء Instance جديدة , بكل بساطة يمكنك ذلك عبر الكود التالي:

var vue = new Vue({

});

تأكد من كتابة هذا الكود بعد استدعاء ملف vue في حال قمت بتنصيبها عبر استدعاء الملف , ان كنت قمت بتنصيبها باستخدام Vue CLI فتخطى هذا الجزء الى أن نتكلم عن انشاء برنامج مرحباً بالعالم في مشروع Vue CLI .

اذاً , في كل Vue instance يوجد أقسام , منها لتعريف متغيرات ومنها لتعريف دوال ومنها مرتبطة بمراحل حياة ال instance او ما يعرف ب Life Cycle Hooks , وعبر برنامجنا العظيم الذي يطبع رسالة مرحباً بالعالم , سنحتاج فقط الى تعريف متغيرات وتحديد العنصر الذي سيتم تطبيق Vue عليه فسيصبح الكود بالشكل التالي:

var vue = new Vue({
el: "#app", //The Element with id of app will be our vue container
data: {
  message: "Hello World!"
}
});

أصبحنا شبه جاهزين الآن , سنقوم بدمج كل شيئ معاً , وسنضيف ال html اللازم لعرض الرسالة , الكود الذي سأكتبه لاحقاً يمكنك نسخه تماماً ووضعه في ملف html وفتحة في المتصفح وتجربته.

<html>
<head><title>Vue Hello World App</title>
</head>
<body>


<div id="app">
  <h1>{{ message }}</h1>
</div>

<!-- CDN The Vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>var vue = new Vue({
  el: "#app",
  data: {
   message: "Hello World"
  }
});
</script>
</body>
</html>

في الكود السابق وبمجرد نسخه ولصقه في ملف html وفتح الملف عبر المتصفح , سيظهر لك رسالة Hello World , بالطبع لا يوضح المثال السابق أي أهمية لاستخدام Vue.js , تظهر أهميتها في مشاريع أكبر من مجرد طباعة رسالة بسيطة على الشاشة.

الآن سنقوم بعمل نفس المشروع , ولكن عبر Vue CLI , بعد ان قمنا بتنصيب مشروعنا و الدخول اليه وتشغيل سيرفر التطوير كما ذكرنا في القسم السابق , سندخل الى ملف App.vue الموجود في مجلد src و هذا الملف هو عبارة عن ال Component الرئيسية للمشروع , يمكنك حذف كل ما فيه والابقاء على التالي فقط

<template><div id="app"><h1>{{ message }}</h1></div>
</template>


<script>
export default {
  name: 'app',
  data: function(){
    return {
      message: "Hello World"
    }
  }
}
</script>


<style>
  h1{
    background-color: lightblue;
    padding:10px;
    text-align: center;
  }
</style>

اذا ما الذي يجري هنا ؟ هذه هي بنية اي Component في Vue.js القسم العلوي <template> يحوي جميع أكواد ال html , تحته مباشرة <script> يحوي الجافاسكريبت وأخيراً style يحوي أكواد css , ان قمت بنسخ الكود السابق ووضعته في ملف App.vue لديك ستجد النتيجة هي رسالة مرحباً بالعالم وسط الصفحة بلون أسود , مع خلفية زرقاء خفيفة.

ويجدر التذكير هنا الى أن أمر npm run serve يجب أن يكون عاملاً بالخلفية ليبقى السيرفر متصل والتحديثات ظاهرة.

أنواع الدوال في Vue.js

انتهينا أخيراً من برنامج مرحباً بالعالم ! سنتحدث الآن عن معلومات عن اطار العمل نفسه يمكن تطبيقها على المشاريع المستخدم فيها Vue CLI او المشاريع العادية , تنقسم أنواع الدوال في Vue الى دالة عادية ودالة حسابية او محسوبة ( computed ) الفرق بين النوعين هو أن الدالة العادية تعمل على اعادة بناء الصفحة كاملة عند حصول تحديث , الدالة المحسوبة على العكس تراقب التحديثات وبمجرد حصول تحديث او بمجرد استدعاء الدالة تقوم باعادة بناء ما يلزم فقط , ولكل دالة استخداماتها , ويتم كتابة الدوال في Vue.js كالتالي ضمن ال instance

var vue = new Vue({
 el: "#app", //The Element with id of app will be our vue container
 data: {
   message: "Hello World!"
 },


 methods: {
  methodName: function(args){
    //Method Body
  }
 },

 computed:{
  computedName: function(args){
   //Computed Body
   }  
 }
});

يتم استدعاء الدالة العادية كأي دالة عبر استخدام الأقواس , اما الدوال المحسوبة يتم استدعائها كمتغير عادي , كالتالي :

methodName();
computedName;

الأحداث في Vue.js

الأحداث هي عندما يحدث حدث ما , تعريف سيئ جداً :) , يعتبر الضغط على زر معين في الصفحة حدث , او مرور الماوس فوق صورة حدث , ويتم تعرف الأحداث عبر الكود كالتالي:

<button v-on:click="MethodName()">Click Me</button><!-- Long Term -->

<button @click="MethodName()">Click Me Again</button><!-- Short Term -->

اذاً وحسب الكود السابق , عند الضغط على أحد الزرين سيتم تفعيل الدالة باسم MethodName , وضمن الدالة تلك يمكن اضافة أكواد معينة ربما للتاكد من حقول فورم معين أو اياً كان , والأحداث في Vue.js كثيرة يمكنك التعرف عليها من هنا: https://vuejs.org/v2/guide/events.html

ال Components في Vue.js

ال Component هي كود يمكن اعادة استخدامه في اماكن اخرى ضمن التطبيق , بمختصر الكلام .

تتميز أطر عمل جافاسكريبت باتباعها لمبدأ ال Components في العمل , ببساطة لن تحتاج الى اعادة تصميم النافبار لكل صفحة او النسخ واللصق , كل ما عليك هو انشاء Component للنافبار واستخدامها عند الحاجة , وان اردت التعديل فيمكنك ذلك في ملف واحد فقط وفي ذلك تمثيل لمبدأ برمجي شهير باسم DRY: Don't Repeat Yourself اي لا تقم بتكرار الكود نفسه أكثر من مرة .

سيحتاج شرح ال Components الكثير من السطور , لذا سنقوم بشرحها باختصار شديد وترك العديد من المصادر للاستزادة , يتم تعريف ال Component عبر انشاء ملف جديد بلاحقة .vue او وضعها ضمن ال Vue Instance التي قمت بانشائها , والمميز حول ال Component هو انه يمكنك انشاء كود html جديد ك <navbar> او <contact-us> او ما تريده , وأيضاً معلومة جميلة هي ان كل Component لديها كل ما تحتاجه من اكواد في مكان واحد , يمكنك وضع ال css , html , js لكل واحدة فيهم ضمن ملفها واستدعائها بشكل منفصل , مما يسهل عملية الاستدعاء او التحديث لاحقاً بدلاً من البحث عن الكود المناسب وتذكر مكانه !

لمعرفة المزيد عن ال Components اليك الفيديو التالي بواسطة قناة The Net Ninja

وأيضاً اليك عدة مصادر أخرى لتعلم المزيد حول ال Components

https://vuejs.org/guide/components.html

فيديو بواسطة Gary Simon يشرح Vue.js خلال 65 دقيقة (مدخل فقط)

دورة Vue.js كاملة تتطرق لل Components

ماذا هناك أيضاً لتعلمه حول Vue.js ؟

الكثير في الواقع , اطار عمل فيو كبير للغاية وضخم ومتشابك بشكل كبير , يستحيل شرح جميع تفاصيله ضمن مقال واحد أو حتى سلسلة مقالات ربما كتاب او سلسلة فيديوهات قد تفي بالغرض ما زال أمامنا الحديث عن vue-router و vuex وغيرها , يمكننا أيضاً الحديث عن أطر العمل المبنية على vue.js ويمكننا الحديث عن أمور أخرى تتعدى مرحلة الأساسيات لتدخل بنا الى مراحل أخرى تتعمق في جوهر Vue.js واستخدامتها كمصلحات مواقع الصفحة الواحد مثلاً ,لن يمكننا الحديث عن كل ذلك لكن سنوفر كم كبير من المصادر للاستزادة حول تلك الأمور , وسنوفر أيضاً بعض الفيديوهات التي تعلمك كيف توظف Vue في مشاريع حقيقة كمشروع بناء موقع للاجتماعات وغيره , سنأتي على ذكرهم في نهاية المقال

ولكن قبل الوصول للنهاية , سنتكلم في نقطة أخيرة وهي Vue extension وهي اداة صغيرة تتم اضافتها الى المتصفح لكي تساعدك على التطوير والعمل

اضافة Vue للمتصفحات (Vue extension)

اضافة بسيطة يمكن تنصيبها على متصفح جوجل كروم أو فيرفوكس او المتصفحات المبنية عليها , تعرف باسم vue-devtools .

ملاحظة مهمة بخصوص vue-devtools هي انه لا يمكنك ستخدامها ان كنت قد اخترت الملف المصغر من vue في مشروعك , وعليك أيضاً أحياناً تفعيلها ضمن مشروعك ان لم تكن مفعلة مسبقاً , يمكنك تفعيلها عبر الكود التالي :

Vue.config.productionTip = false

تعطيك هذه الاضافة نظرة عامة عن المشروع بجميع تفاصيله , المتغيرات التي قمت بتحديدها والدوال وغير ذلك كما تقوم بقياس اداء الصفحة وغيرها من الأمور , ويمكنك تنزيل الأداة عبر الروابط التالية:

vue-devtools For Google Chrome

vue-devtools For Firefox

vue-devtools in Github

كيف أتعلم Vue.js , و ما هي أفضل المصادر التعليمية ؟

تنتشر الكثير من المصادر لتعلم Vue في الانترنت بشكل كبير ويوجد مصادر عربية وانكليزية ذات جودة عالية فعلاً , سنقدم مجموعة من أهم المصادر عبر الروابط التالية:

الموقع الرسمي : https://vuejs.org/v2/guide/ (مصدر نصي)

Vue Mastery : https://www.vuemastery.com/courses/

Vue Schools : https://vueschool.io

Elzero Web School :

https://www.youtube.com/watch?v=13fv-xEAFmY&list=PLDoPjvoNmBAxr5AqK3Yz4DWYKVSmIFziw

GoArabGo:

https://www.youtube.com/watch?v=8yT0QIJOKB0&list=PL1FWK-sgJ9eljz7Tm5SSUcCt5sxmwoFlC

The Net Ninja:

https://www.youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa

Academind (Full Project):

https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt

في النهاية ...

انتهى المقال أخيراً , يعتمد مستقبل الويب ومصممي الويب على التطور اليومي , Vue.js يعتبر مرحلة متقدمة من جافاسكريبت و لكن دون التعقيدات التي تأتي مع التطور , تأكد من ان تتعلمه خلال أسرع وقت , وأخبرنا , ما رأيك في المقال ؟ وهل من أشياء معينة بحاجة لتحديث أو تطوير في المقال ؟