LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 815 min read

Template Syntax

Learn text interpolation, attribute binding, and expressions inside a Vue template.

Text Interpolation

Double curly braces — called "mustaches" — insert the value of a JavaScript expression into the rendered text of an element.

<script setup>
const name = 'Vue';
</script>


<template>
  <p>Hello, {{ name }}!</p>
  <p>2 + 2 = {{ 2 + 2 }}</p>
</template>

Attribute Binding with v-bind

Mustaches only work inside text content — for HTML attributes, use the v-bind directive (or its shorthand, a colon) to bind an attribute's value to an expression.

<template>
  <img v-bind:src="imageUrl" alt="Product photo" />
  <!-- shorthand, used almost everywhere in practice -->
  <img :src="imageUrl" alt="Product photo" />
</template>
The Colon Shorthand

You will see :attribute far more often than v-bind:attribute in real Vue code — they are exactly equivalent, and the shorthand is the de facto standard.

JavaScript Expressions

Templates support any single JavaScript expression — not full statements. Ternaries, method calls, and property access all work; if/else statements and variable declarations do not.

Valid Expressions

vue
{{ isActive ? 'Active' : 'Inactive' }}
{{ user.name.toUpperCase() }}
{{ items.length }}

Invalid (Statements)

vue
{{ if (isActive) { 'Active' } }}
{{ const x = 5; x }}

Move this kind of logic into a computed property instead (covered soon).

Common Beginner Mistakes

Using mustaches inside an HTML attribute

Writing <img src="{{ imageUrl }}"> does not work — attributes must use v-bind (or its : shorthand), not mustaches.

Putting complex multi-line logic directly in a template

Keep templates focused on display — extract non-trivial logic into a computed property or method.

FAQs

No — mustaches always render as plain text for security. Use the v-html directive for raw HTML, and only with trusted content, since it can introduce XSS risk otherwise.

Compiled — Vite compiles templates into efficient JavaScript render functions ahead of time, which is a big part of why Vue is fast.

Summary

Mustaches handle text, v-bind handles attributes, and both accept any single JavaScript expression. Next, you'll learn the core directives that control structure — conditionals and loops.

Next Lesson →

Core Directives