Атрибуты из данных

Фигурные скобки работают только в тексте элемента. Чтобы задать атрибут из данных, например адрес картинки, используйте v-bind:

<script setup>
const logo = "/vue.svg";
const topic = "Vue";
</script>

<template>
    <img v-bind:src="logo" v-bind:alt="topic + ' — логотип'">
</template>

v-bind:src="logo" задаёт атрибуту src значение logo, так что на странице получается <img src="/vue.svg" alt="Vue — логотип">. Между кавычками v-bind стоит выражение JavaScript, как и в скобках, а не текст. Поэтому logo — это переменная, и поэтому текст внутри выражения, такой как ' — логотип', записан в одинарных кавычках: двойные уже окружают всё выражение.

Атрибуты, которые начинаются с v-, — это директивы: указания для Vue, которые он выполняет при создании страницы. Браузер их никогда не видит, он получает только результат. С другими директивами вы встретитесь на этом курсе, например с v-if, v-for и v-model. @click из прошлого урока — тоже директива, сокращение от v-on:click.

v-bind нужен так часто, что у него есть короткая запись, просто двоеточие: :src="logo" — то же, что v-bind:src="logo". В проектах на Vue почти всегда пишут короткую запись, и этот курс тоже. Она работает для любого атрибута, например :href для адреса ссылки или :title для текста, который появляется при наведении на элемент.

Атрибуты без значения, такие как disabled у кнопки, принимают true или false: при :disabled="full" кнопка отключена, когда full истинно, а когда ложно, Vue просто не добавляет атрибут.

Почему не src="{{ logo }}"? Потому что в атрибутах скобки не работают. Vue оставляет такой атрибут как есть, и браузер ищет картинку по адресу {{ logo }}, которого не существует. Запомните: скобки — для текста, двоеточие — для атрибутов.