في الدرس السابق
بدأنا بكتابة كود vue وتعلمنا عرض البيانات في صفحة
index.html
والآن سنتعرف أكثر على data & methods داخل نموذج الـVue
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ 
داخل ملف app.js سنضيف methods وهي property ضمنية نكتب فيها كل الدوال
new Vue({
el: '#my-app',
data: {
name: 'coretabs',
age: 19
},
methods: {
// هنا نكتب الدوال الخاصة بنا
}
})
نتخيل مثلا دالة تقوم بإلقاء التحية على المستخدم:
methods: {
sendGreet: function() {
return 'have a good time'
}
}
لنذهب الى صفحة index.html
<body>
<div id="my-app">
<h1>{{ sendGreet() }}</h1>
</div>
<script src="app.js"></script>
</body>
نلاحظ عند استدعاء الدالة تكتب بالأقواس كما نفعل في الجافاسكريبت بشكل عام
تعالو نجربها من غير الأقواس () بهذا الشكل:
<h1>{{ sendGreet }}</h1>
النتيجة:
هنا يظهر الفارق!
رائع! الآن تعالو نحاول الحصول على بيانات من data داخل الmethods
اذا أردنا مثلا استدعاء name لنلقي التحية عليه
بالطريقة الاعتيادية للجافاسكريبت تكون هكذا:
methods: {
sendGreet: function() {
return this.data.name
}
}
الحقيقة أنها في Vue ليست كذلك
من روعة Vue({}) أنها تأخذ كل تلك العناصر الى الخارج بمعنى أنك فقط ستستدعي name بدون المرور على data
methods: {
sendGreet: function() {
return this.name
}
}
يمكننا تعديل الدالة الآن:
methods: {
sendGreet: function() {
return 'Hello' + ' ' + this.name
}
أو يمكننا كتابتها بصيغة ES6 المحدّثة للجافاسكريبت هكذا (ليس بالضروري، لكن أسهل):
methods: {
sendGreet: function() {
return `Hello ${this.name}`
}
وهي طريقة أسهل لا تحتاج إلى concatenation
فقط نستخدم علامة الـbackticks الموجودة أسفل زر ESC
- علامة
${}تفتح المجال لكتابة أي كود بداخلها
النتيجة:
من الممكن أن نجعل الدالة ديناميكية أكثر بمعنى أنه يمكننا استخدام name كـ argument نمررها داخل الدالة:
// app.js
methods: {
sendGreet: function(argument) {
return `Hello ${argument}`
}
}
نمرر الـname من الدالة داخل الصفحة:
// index.html
<div id="my-app">
<h1>{{ sendGreet(name) }}</h1>
</div>
النتيجة:
يمكنكم التفاعل مع الكود هنا:
والآن مع الفيديو المفيد
.
