Atributy z dat

Závorky fungují jen v textu prvku. Abyste z dat nastavili atribut, třeba adresu obrázku, použijte v-bind:

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

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

v-bind:src="logo" nastaví atribut src na hodnotu proměnné logo, takže stránka dostane <img src="/vue.svg" alt="Logo Vue">. V uvozovkách za v-bind je výraz v JavaScriptu, stejně jako v závorkách, a ne text. Proto je logo proměnná a text ve výrazu, třeba 'Logo ', je v jednoduchých uvozovkách: ty dvojité už ohraničují celý výraz.

Atributy, které začínají v-, jsou direktivy: pokyny pro Vue, které provede, když vytváří stránku. Prohlížeč je nikdy nevidí, dostane jen výsledek. V kurzu potkáte další direktivy, třeba v-if, v-for a v-model. I @click z minulé lekce je direktiva, zkratka pro v-on:click.

v-bind se používá tak často, že má zkratku, samotnou dvojtečku: :src="logo" je totéž co v-bind:src="logo". V projektech ve Vue se skoro vždy píše zkratka, a tak to bude i v tomto kurzu. Funguje pro jakýkoli atribut, třeba :href pro adresu odkazu nebo :title pro text, který se ukáže, když na prvek najedete myší.

Atributy bez hodnoty, jako je disabled u tlačítka, se navazují na true, nebo false: s :disabled="plno" je tlačítko neaktivní (nedá se na něj kliknout), když plno platí, a když neplatí, Vue atribut vynechá.

Proč ne src="{{ logo }}"? Protože v atributech závorky nefungují. Vue takový atribut nechá, jak je, a prohlížeč pak hledá obrázek na adrese {{ logo }}, která neexistuje. Pamatujte si: v textu závorky, v atributech dvojtečka.