من أكثر الأشياء غير المحببة في البرمجة هي أن تكرر نفسك ضمن الكود، وهو ذاته ما يخبرنا به المبدأ DRY الذي تم شرحه مسبقاً في الأكاديمية ويعني Don’t repeat yourself أي لا تكرر نفسك.
دوماً ما يعمل المطورون على إيجاد وسائل تقلل من تكرار كتابة الأوامر البرمجية، تماماً كما هو الأمر في vue js، حيث توجد الحلقة التكرارية v-for
التي تساعدك على تكرار أمر معين لتمرر من خلاله في كل دورة بيانات مختلفة.
لو أنه يوجد لدي أسماء مجموعة من الأشخاص :
data: {
names : [
{'id': 1 , 'name': "أحمد"},
{'id': 2 , 'name': "يوسف"},
{'id': 3 , 'name': "محمد"},
{'id': 4 , 'name': "حسن"}
]
}
أريد أن اعرض هذه الأسماء ضمن قائمة كيف أقوم بذلك باستخدام v-for
؟
<div id="app">
<ul>
<li v-for="item in names" :key="item.id">{{item.id}} - {{item.name}} </li>
</ul>
</div>
سوف تظهر لنا النتيجة بهذا الشكل:
1 - أحمد
2 - يوسف
3 - محمد
4 - حسن
كما تلاحظوا اننا باستخدام سطر واحد نستطيع أن نطبع مئات النتائج باستخدام حلقة for، وهذه أحد صور قوة وبساطة vue js
أعلم انكم تتساءلون ما الغاية من إضافة هذه التعليمة
:key="item.id"
ضمن حلقةv-for
!
في الحقيقة يتم إضافة المفتاح key لكي يكون بمثابة رقم مرجعي لترتيب العناصر وينصح دوما باستخدامه مع الخلاقة for، وأيضا من الجيد أن يتم استخدم مفتاح فريد مثل (Primary key) أو اسم غير مكرر، لكن ليس من الجيد ان يتم استخدام المفتاح كمصفوفة أو كائن.
وهكذا يصبح الكود كامل بهذا الشكل:
الكود كامل
<div id="app">
<ul>
<li v-for="item in names" :key="item.id">{{item.id}} - {{item.name}} </li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
names : [
{'id': 1 , 'name': "أحمد"},
{'id': 2 , 'name': "يوسف"},
{'id': 3 , 'name': "محمد"},
{'id': 4 , 'name': "حسن"}
]
}
})
</script>
لتفاصيل أكثر يمكنم متابعة الدرس على اليوتيوب:
يمكنكم متابعة جميع الدروس من خلال الفهرس
فهرس سلسلة تعلم vue js ببساطة