Attributes from Data

The braces work only in the text of an element. To set an attribute from data, for example the address of a picture, use v-bind:

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

<template>
    <img v-bind:src="logo" v-bind:alt="topic + ' logo'">
</template>

v-bind:src="logo" sets the attribute src to the value of logo, so the page gets <img src="/vue.svg" alt="Vue logo">. Between the quotes of v-bind is a JavaScript expression, as in the braces, not text. That's why logo is the variable, and why a text in the expression, such as ' logo', is in single quotes: the double ones already surround the whole expression.

Attributes that start with v- are directives: instructions for Vue, which it carries out when it makes the page. The browser never sees them; it only gets the result. You'll meet more directives in this course, such as v-if, v-for and v-model. The @click from the last lesson is one too, short for v-on:click.

v-bind is used so often that it has a short form, just the colon: :src="logo" is the same as v-bind:src="logo". Vue projects almost always write the short form, and so will this course. It works for any attribute, for example :href for the address of a link, or :title for the text that shows when you hover over an element.

Attributes without a value, such as disabled on a button, take true or false: with :disabled="full", the button is disabled when full is true, and when it's false, Vue leaves the attribute out.

Why not src="{{ logo }}"? Because braces don't work in attributes. Vue leaves such an attribute as it is, and the browser looks for a picture at the address {{ logo }}, which doesn't exist. Remember: braces in text, a colon in attributes.