Template Syntax & Interpolation

A Vue template is HTML with a small amount of extra syntax layered on top — double curly braces to print a value, and a handful of special attributes to bind data to the rest of the page.

Text interpolation with {{ }}

Anything inside double curly braces is a JavaScript expression, evaluated against the component's data and re-evaluated automatically whenever that data changes:

<p>Hello, {{ name }}! You have {{ items.length }} items.</p>

Hello, Priya! You have 3 items.

Anything that's valid as a single JavaScript expression works inside the braces — property access, simple arithmetic, ternaries — but not full statements like if or a for loop. Those have their own dedicated syntax, covered in the next lesson.

Binding attributes with v-bind (or the : shorthand)

Curly braces only work for text content — to bind data into an HTML attribute, you need v-bind, almost always written with its shorthand, a leading colon:

<img :src="avatarUrl" :alt="userName">
<a :href="profileLink">View profile</a>

<img src="/img/priya.png" alt="Priya">
<a href="/users/priya">View profile</a>

:src="avatarUrl" means "set the src attribute to whatever avatarUrl currently holds" — and like text interpolation, it updates automatically if avatarUrl changes later.

Binding classes conditionally

A common pattern is toggling a CSS class based on a boolean, which :class supports directly with an object — each key is a class name, each value decides whether it's applied:

<p :class="{ error: hasError, bold: isImportant }">Status message</p>

<p class="error">Status message</p>