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

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

في هذه المقالة، سوف نستكشف كيفية العمل مع ربط البيانات في Vue.js، وتغطية ربط البيانات أحادي الاتجاه، وربط البيانات ثنائي الاتجاه، وأمثلة عملية لكل منهما.

أنواع ربط البيانات في Vue.js

يقدم Vue.js نوعين رئيسيين من ربط البيانات:

ربط البيانات في اتجاه واحد: تتدفق البيانات في اتجاه واحد، من نموذج بيانات المكون إلى العرض.
ربط البيانات في كلا الاتجاهين: تتدفق البيانات في كلا الاتجاهين، من نموذج البيانات إلى العرض وبالعودة من العرض إلى نموذج البيانات.

ربط البيانات في اتجاه واحد باستخدام v-bind

يتم تحقيق ربط البيانات في اتجاه واحد في Vue.js باستخدام التوجيه v-bind. يربط هذا التوجيه بشكل ديناميكي سمة بتعبير في بياناتك. يُستخدم عادةً لربط سمات HTML مثل src وhref وalt والمزيد.

فيما يلي مثال على استخدام v-bind لربط السمة src لعنصر الصورة:

<template>
  <div>
    <img v-bind:src="imageUrl" alt="Dynamic Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

الاختصار لـ v-bind هو علامة النقطتين (:). يمكن إعادة كتابة المثال أعلاه على النحو التالي:

<img :src="imageUrl" alt="Dynamic Image" />

ربط البيانات في اتجاهين باستخدام v-model

يتم تحقيق ربط البيانات ثنائي الاتجاه في Vue.js باستخدام التوجيه v-model. فهو ينشئ ربطًا بين عنصر إدخال النموذج ونموذج البيانات، مما يسمح بانعكاس التغييرات تلقائيًا في كل من البيانات والعرض.

فيما يلي مثال لاستخدام v-model لربط البيانات ثنائي الاتجاه مع عنصر الإدخال:

<template>
  <div>
    <input v-model="message" placeholder="Enter your message" />
    <p>Your message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

في هذا المثال، أثناء الكتابة في حقل الإدخال، يتم تحديث خاصية البيانات message تلقائيًا، ويعرض عنصر <p> القيمة المحدثة في الوقت الفعلي.

ربط عناصر النموذج باستخدام v-model

يمكن استخدام التوجيه v-model مع عناصر نموذج مختلفة مثل مربعات الاختيار وأزرار الاختيار والتحديدات. فيما يلي بعض الأمثلة:

ربط خانة الاختيار

<template>
  <div>
    <input type="checkbox" v-model="isChecked" /> Checked: {{ isChecked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

ربط أزرار الراديو

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption" />
    <label for="option1">Option 1</label>
    <br>
    <input type="radio" id="option2" value="Option 2" v-model="selectedOption" />
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

حدد الربط

<template>
  <div>
    <select v-model="selectedValue">
      <option disabled value="">Please select one</option>
      <option>Option A</option>
      <option>Option B</option>
    </select>
    <p>Selected: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: ''
    };
  }
};
</script>

ربط البيانات لمرة واحدة باستخدام v-one

يتم استخدام التوجيه v-once لربط البيانات بعرض مرة واحدة فقط. بعد العرض الأولي، لن تنعكس أي تغييرات على نموذج البيانات في العرض. وهذا مفيد للمحتوى الثابت الذي لا يحتاج إلى أن يكون تفاعليًا:

<template>
  <div v-once>
    This content is rendered only once: {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

ملخص

يعد ربط البيانات في Vue.js ميزة قوية تتيح للمطورين إنشاء تطبيقات ديناميكية وتفاعلية بأقل جهد. من خلال فهم والاستفادة من الأنواع المختلفة من تقنيات ربط البيانات، مثل الربط أحادي الاتجاه باستخدام v-bind، والربط ثنائي الاتجاه باستخدام v-model، والربط لمرة واحدة باستخدام v-once، يمكنك إنشاء تطبيقات أكثر كفاءة واستجابة.

vue ربط البيانات v-bind v-model vuex التفاعلية اتجاه واحد اتجاهين التوجيهات المكونات الدعائم الطرق النماذج المدخلات