Як працювати з прив’язкою даних 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-моделлю

Двостороннє зв’язування даних у 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-моделлю

Директиву 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-once

Директива 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, ви можете створювати більш ефективні та чутливі програми.