في الدرس السابق
تعرفنا على الشاب الوسيم مخترع Vuejs كما قمنا بتثبيت الأدوات اللازمة
والآن سنبدأ بكتابة أول كود بالـVue ونتعرف على ماهية الـvue instance
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ 
سنقوم بانشاء ملف جافاسكريبت كما بالشكل
ولا ننسى عمل import لهذا الملف داخل index.html
<body>
<script src="app.js"></script>
</body>
الآن سنضيف أول نموذج vue داخل ملف app.js باضافة الكود التالي: ==> new Vue({})
نموذج vue يقوم بإدارة كل شئ تقريبا داخل التطبيق الخاص بك
يمكنك خلق عدد لا نهائي من النماذج (مثلا لو أحببت تجعل الرسائل والتنويهات تُدار بنموذج vue مستقل عن النموذج المتحكم بالتطبيق لك ذلك)
داخل الأقواس ({ }) سنكتب الإعدادات أو الـparameters التي سنحتاجها
هاته الأقواس عبارة عن data object
كلنا يعرف الشكل العام للـdata object في لغة الجافاسكريبت مثل المثال التالي:
// مثال للتوضيح فقط
({
data1: {},
data2: { x: null }
});
أول قيمة سنحتاجها هي الـ el أو العنصر الذي سيتم التحكم به داخل صفحتك
نتذكر معا صفحة index.html داخل الـbody
// index.html
<body>
// هنا نحدد عنصر نستطيع التحكم به
<div id="my-app">
</div>
</body>
الآن في ماف app.js سنحدد الـid الخاص بالعنصر الذي كتبناه
// app.js
new Vue({
el: '#my-app'
})
لنعود الى صفحة index.html
<body>
<div id="my-app">
// الآن أي شي يكتب هنا يدار بواسطة فيو
</div>
</body>
لو حبينا نكتب أي شئ، لدى vue طريقة سحرية سنتعرف عليها سويا
داخل ملف app.js سنضيف property جديدة وهي data:
new Vue({
el: '#my-app',
data: {
name: 'coretabs'
}
})
داخل data يمكنك وضع أي شيء تقريبا، سنكتفي بفرض قيمة name
الأن نود طباعة محتوى name داخل index.html باستخدام الـ blade syntax {{}}
<div id="my-app">
<h1>
{{ name }}
</h1>
</div>
والنتيجة
العجيب في vue أنه يمكنك مثلا كتابة دالة داخل الblade
لنقم بتجربة جديدة (نكتب دالة شرطية مثلا):
<div id="my-app">
<h1>
{{ name == 'coretabs' ? 'true' : 'false' }}
</h1>
</div>
والنتيجة
في التجربة السابقة، كتبت الدالة الشرطية بصيغة الـ ternary operator وهي مختصرة عن الصيغة التالية:
if (condition) {
// do something
} else {
// do something else
}
لتكون بهذا الشكل:
condition ? do something : do something else
فقط جعلت vue يرى اذا كانت قيمة name تساوي coretabs
يمكنكم التفاعل مع الكود هنا:
أو هنا
هاته فقط تجربة توضح قدرات vue البسيطة، اذا كنت خبيرا في لغة jQuery تخيل عدد سطور الكود التي ستكتبها لتنفيذ نفس المهمة
لنشاهد معا ما طبقناه في الفيديو التالي:
نتمنى لكم التوفيق
