Що таке прив'язки атрибутів у Vue?

Прив'язка атрибутів у Vue.js дозволяє динамічно встановлювати значення HTML-атрибутів або пропсів компонентів на основі даних. Для цього використовується директива v-bind або її короткий синтаксис :.

Чому це важливо?

Реактивність. Коли змінюється прив'язане значення, Vue автоматично оновлює відповідний атрибут у DOM.
Гнучкість. Можна встановлювати умовні, обчислювальні та складні значення атрибутів.
Чистота шаблону. Вилучає необхідність ручного маніпулювання DOM через JavaScript.

Синтаксис прив'язки

Стандартна форма

html

<a v-bind:href="url">Link</a>

Коротка форма

html

<a :href="url">Link</a>

Приклад компонент

html

<template>
  <button
    :disabled="isLoading"
    :title="tooltipText"
    v-bind:data-id="item.id"
  >
    {{ isLoading ? "Loading..." : "Submit" }}
  </button>
</template>

<script>
export default {
  props: {
    url: String,
    item: Object,
    isLoading: Boolean,
    tooltipText: String
  }
};
</script>

Не плутайте з регулярним рядком:

Запис <button disabled="isLoading"> не спрацює — без v-bind або : Vue не інтерпретує значення як змінну.

Прив'язка кількох атрибутів одночасно

Використання об'єкта

html

<template>
  <img v-bind="imageAttrs" />
</template>

<script>
export default {
  data() {
    return {
      imageAttrs: {
        src: "logo.png",
        alt: "Logo",
        width: 100,
        height: 50
      }
    };
  }
};
</script>

Примітка:

Vue автоматично розподілить всі поля об'єкта imageAttrs як атрибути <img>.

Кроки для використання прив'язок атрибутів

1. Визначте дані або пропси

У компоненті data або props задайте змінні для атрибутів.

2. Використовуйте `v-bind` або `:` в шаблоні

Додайте :attribute="expression" до потрібного елемента.

3. Уникайте лапок навколо виразів

Пишіть :href="url", а не :href="'url'" — інакше це стане рядком. Примітка:

Для прив'язки класів і стилів є окремі директиви :class і :style, але вони також реалізовані через v-bind.

Дізнайтеся більше в офіційній документації Vue: Прив'язка атрибутів

Зміст

Чому це важливо?Синтаксис прив'язкиСтандартна формаКоротка формаПриклад компонентПрив'язка кількох атрибутів одночасноВикористання об'єктаКроки для використання прив'язок атрибутів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань