Attribute aus Daten

Die Klammern funktionieren nur im Text eines Elements. Um ein Attribut aus Daten zu setzen, zum Beispiel die Adresse eines Bildes, verwendest du v-bind:

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

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

v-bind:src="logo" setzt das Attribut src auf den Wert von logo, die Seite bekommt also <img src="/vue.svg" alt="Vue-Logo">. Zwischen den Anführungszeichen von v-bind steht ein JavaScript-Ausdruck, wie in den Klammern, kein Text. Deshalb ist logo die Variable, und deshalb steht ein Text im Ausdruck, wie '-Logo', in einfachen Anführungszeichen: Die doppelten umschließen schon den ganzen Ausdruck.

Attribute, die mit v- beginnen, sind Direktiven: Anweisungen für Vue, die es ausführt, wenn es die Seite erstellt. Der Browser sieht sie nie, er bekommt nur das Ergebnis. Weitere Direktiven lernst du in diesem Kurs kennen, etwa v-if, v-for und v-model. Auch das @click aus der letzten Lektion ist eine, die Kurzform von v-on:click.

v-bind wird so oft verwendet, dass es eine Kurzform hat, nur den Doppelpunkt: :src="logo" ist dasselbe wie v-bind:src="logo". Vue-Projekte schreiben fast immer die Kurzform, und dieser Kurs auch. Sie funktioniert für jedes Attribut, zum Beispiel :href für die Adresse eines Links oder :title für den Text, der erscheint, wenn du mit der Maus über einem Element verweilst.

Attribute ohne Wert, wie disabled bei einem Button, nehmen true oder false: Bei :disabled="voll" ist der Button deaktiviert, wenn voll wahr ist, und ist es falsch, lässt Vue das Attribut weg.

Warum nicht src="{{ logo }}"? Weil Klammern in Attributen nicht funktionieren. Vue lässt ein solches Attribut, wie es ist, und der Browser sucht ein Bild unter der Adresse {{ logo }}, die es nicht gibt. Merke dir: Klammern im Text, ein Doppelpunkt bei Attributen.