Data Binding في Vue.js: شرح متعمق وأمثلة ملموسة

Data Binding هي ميزة أساسية في Vue.js تتيح لك إنشاء اتصال بين البيانات الموجودة في التطبيق الخاص بك وواجهة المستخدم. يسمح لك بتحديث البيانات ومزامنتها ديناميكيًا بين النموذج والعرض ، مما يوفر تجربة مستخدم سلسة وتفاعلية.

في Vue.js ، هناك عدة أنواع data binding متاحة:

 

1. Interpolation

Interpolation في Vue.js يسمح لك بتضمين التعبيرات داخل أقواس مزدوجة متعرجة {{ }} في القالب.

مثال:

<div>  
  <p>{{ message }}</p>  
</div>

في المثال أعلاه ، message هي خاصية بيانات للمكون. عندما تتغير قيمة المحتوى ،  سيتم تحديث message المحتوى الموجود داخل العلامة تلقائيًا. <p>

 

2. One-Way Binding

One-Way Binding يسمح لك بربط البيانات من خاصية بيانات المكون بواجهة المستخدم. ستنعكس أي تغييرات في خاصية البيانات في واجهة المستخدم ، ولكن ليس العكس. مثال:

<div>  
  <p>{{ message }}</p>  
  <button @click="updateMessage">Update</button>  
</div>

data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
},  
methods: {  
  updateMessage() {  
    this.message = 'Updated message';  
  }  
}

عند النقر فوق الزر "تحديث" ، ستتغير قيمة message  ويتم عرضها في واجهة المستخدم.

 

3. Two-Way Binding

Two-Way Binding يسمح لك بمزامنة البيانات بين النموذج وواجهة المستخدم. عندما تتغير البيانات في النموذج أو واجهة المستخدم ، سيتم تحديث كليهما تلقائيًا.

مثال:

<div>  
  <input v-model="message" type="text">  
  <p>{{ message }}</p>  
</div>

data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
}

في المثال أعلاه ، سيتم تحديث القيمة التي تم إدخالها في الإدخال إلى المتغير message  ، والعكس صحيح ، إذا message  تغيرت ، سيتم أيضًا تحديث القيمة في الإدخال.

 

4. Computed Properties

تسمح لك الخصائص المحسوبة بحساب القيم بناءً على خصائص البيانات الأخرى في المكون.

مثال:

<div>  
  <p>Full Name: {{ fullName }}</p>  
</div>

data() {  
  return {  
    firstName: 'John',  
    lastName: 'Doe'  
  };  
},  
computed: {  
  fullName() {  
    return this.firstName + ' ' + this.lastName;  
  }  
}

في المثال أعلاه ، fullName هي خاصية محسوبة من firstName و lastName. متى firstName أو lastName التغييرات ، fullName سيتم أيضًا تحديثها.

 

5 Watchers.:

Watchers يسمح لك بمراقبة تغييرات معينة في خصائص البيانات وتنفيذ إجراءات غير متزامنة أو معقدة عند حدوث التغيير.

مثال:

<div>  
  <p>Count: {{ count }}</p>  
</div>

data() {  
  return {  
    count: 0  
  };  
},  
watch: {  
  count(newValue, oldValue) {  
    // Perform action when count changes  
    console.log('Count changed:', newValue, oldValue);  
  }  
}

في المثال أعلاه ، كلما كانت قيمة count التغييرات ، سيتم تشغيل المراقب وتنفيذ الإجراء المقابل.

من خلال استخدام هذه Data Binding التقنيات ، يمكنك الاستفادة من مرونة Vue.js لإدارة البيانات ومزامنتها بسهولة بين النموذج وواجهة المستخدم بطريقة مباشرة وفعالة.

 

من خلال استخدام هذه data binding التقنيات ، يمكنك إنشاء واجهات مستخدم ديناميكية وتفاعلية في تطبيقات Vue.js الخاصة بك. يوفر Vue.js نظامًا قويًا ومرنًا data binding يبسط عملية إدارة البيانات وتحديثها. دعنا نستكشف كل من هذه data binding الأساليب ونرى كيف يمكن تنفيذها في مشاريع Vue.js الخاصة بك.