Vue Template Syntax

Vue templates are HTML with extra features that connect the page to your data.

Text Interpolation

Use double curly braces, often called mustache syntax, to show a value:

<script setup>
const name = "Bilal";
const fee = 4500;
</script>

<template>
  <p>Student: {{ name }}</p>
  <p>Monthly fee: Rs {{ fee }}</p>
</template>

Student: Bilal
Monthly fee: Rs 4500

Every variable and function declared in <script setup> is available in the template automatically.

JavaScript Expressions

Inside {{ }} you can write any single JavaScript expression:

<script setup>
const price = 1200;
const quantity = 3;
const city = "karachi";
const isMember = true;
</script>

<template>
  <p>Total: Rs {{ price * quantity }}</p>
  <p>City: {{ city.toUpperCase() }}</p>
  <p>{{ isMember ? "Member discount applied" : "No discount" }}</p>
</template>

Total: Rs 3600
City: KARACHI
Member discount applied

Statements such as if, for or let x = 1 are not allowed inside {{ }}. Use directives (next lessons) or move the logic into the script.

Binding Attributes with v-bind

Curly braces do not work inside HTML attributes. To set an attribute from data, use the v-bind directive:

<script setup>
const logo = "/images/logo.png";
const shopUrl = "https://example.com/shop";
const isDisabled = true;
</script>

<template>
  <img v-bind:src="logo" alt="Shop logo" />
  <a v-bind:href="shopUrl">Visit shop</a>
  <button v-bind:disabled="isDisabled">Checkout</button>
</template>

Because v-bind is used so often, it has a short form: just a colon :.

<img :src="logo" alt="Shop logo" />
<a :href="shopUrl">Visit shop</a>

Both forms do exactly the same thing. Most Vue code uses the short form.

Binding Classes and Styles

:class accepts an object. Each class is added when its value is true:

<script setup>
const isActive = true;
const hasError = false;
</script>

<template>
  <div :class="{ active: isActive, error: hasError }">Status box</div>
</template>

<div class="active">Status box</div>

:style accepts an object of CSS properties in camelCase:

<p :style="{ color: 'green', fontSize: '20px' }">Payment received</p>

Raw HTML with v-html

{{ }} always shows text, so HTML tags appear as plain text. To render real HTML, use v-html:

<p v-html="'<strong>Bold notice</strong>'"></p>

Summary

Directives are special attributes that start with v-. You will meet v-if, v-for, v-on and v-model soon.

Exercise