v-bind — это одна из основных директив во Vue.js, которая используется для динамического связывания атрибутов и пропов с данными. Она позволяет сделать шаблон реактивным и автоматически обновлять значения атрибутов HTML-элементов при изменении соответствующих данных во Vue-приложении.

Синтаксис

<!-- Полный синтаксис -->
<a v-bind:href="url">Ссылка</a>
<!-- Короткий синтаксис (сокращение через двоеточие) -->
<a :href="url">Ссылка</a>

v-bind:attribute="expression" привязывает значение выражения к указанному атрибуту элемента. Атрибут будет обновляться, когда expression изменяется.

Как работает под капотом

Когда ты пишешь v-bind:href="url", Vue следит за реактивной переменной url в data() или computed. Если значение url изменится, Vue автоматически обновит DOM и подставит новое значение в атрибут href.

Примеры использования

1. Динамическая ссылка

<a :href="site">Перейти на сайт</a>
<script>
const { createApp } = Vue
createApp({
data() {
return {
site: 'https://example.com'
}
}
}).mount('#app')
</script>

2. Подстановка изображений

<img :src="imageUrl" :alt="imageAlt">
<script>
const { createApp } = Vue
createApp({
data() {
return {
imageUrl: 'https://picsum.photos/200',
imageAlt: 'Пример изображения'
}
}
}).mount('#app')
</script>

3. Динамическое управление классами

<div :class="active ? 'active' : 'inactive'">Контент</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
active: true
}
}
}).mount('#app')
</script>

Привязка нескольких атрибутов

Можно привязать сразу несколько атрибутов через объект:

<button v-bind="buttonAttrs">Кликни</button>
<script>
createApp({
data() {
return {
buttonAttrs: {
id: 'my-button',
class: 'btn btn-primary',
disabled: false
}
}
}
}).mount('#app')
</script>

Использование с компонентами

Когда ты передаёшь данные в компоненты через props, тоже можно использовать v-bind:

<MyButton :label="buttonText" />
<script>
app.component('MyButton', {
props: \['label'\],
template: \`<button>{{ label }}</button>\`
})
</script>

Также можно использовать v-bind для передачи всех props из объекта:

<MyButton v-bind="buttonProps" />

Привязка булевых атрибутов

Если ты передаёшь булевое значение, Vue обрабатывает его корректно:

<input type="checkbox" :checked="isChecked" />
<script>
createApp({
data() {
return {
isChecked: true
}
}
}).mount('#app')
</script>

Если isChecked = true, атрибут checked появится. Если false, он исчезнет.

С v-bind можно привязывать любые HTML-атрибуты

• src

• href

• alt

• class

• style

• disabled

• readonly

• placeholder

• value

• любые другие.

Динамическое имя атрибута

Vue позволяет делать даже это:

<!-- Будет то же самое, как :href="..." -->
<a v-bind:\[attributeName\]="url">Динамический атрибут</a>
<script>
createApp({
data() {
return {
attributeName: 'href',
url: 'https://example.com'
}
}
}).mount('#app')
</script>

Это называется динамический аргумент в v-bind. Он может быть любым действительным именем атрибута.

Привязка стилей

Можно использовать v-bind для связывания инлайновых стилей:

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Стильный текст</div>
<script>
createApp({
data() {
return {
textColor: 'blue',
fontSize: 18
}
}
}).mount('#app')
</script>

Также поддерживаются вложенные объекты, например, transform или background.

Привязка классов

v-bind:class поддерживает:

• Строки: class="...".

• Объекты: { active: isActive, error: hasError }.

• Массивы: ['btn', dynamicClass].

Пример с объектом:

<div :class="{ active: isActive, disabled: isDisabled }">...</div>
<script>
createApp({
data() {
return {
isActive: true,
isDisabled: false
}
}
}).mount('#app')
</script>

Различие между v-bind и обычными атрибутами

Если ты напишешь просто href="...", то значение будет статическим. Vue не будет за ним следить и не обновит DOM, если переменная изменится. С v-bind ты получаешь реактивность: любое изменение данных в data() автоматически отразится в DOM.

v-bind — ключевой инструмент, обеспечивающий реактивность интерфейса. Он позволяет писать чистые и динамичные шаблоны, автоматически синхронизирующиеся с данными.