Vue Template Syntax

Vue Template Syntax: Interpolation and Template Expressions

Vue template syntax extends standard HTML so you can declaratively bind rendered output to component state. Behind the scenes, the Vue compiler turns every <template> into optimized JavaScript render functions.

Because templates are valid HTML, designers and developers can read markup quickly while keeping reactive expressions short and clear. Vue supports text interpolation, single JavaScript expressions, and directive bindings right inside HTML tags.

flowchart LR
    Template["HTML Template with Mustaches"] --> Compiler["Vue Template Compiler"]
    Compiler --> Render["Optimized JS Render Function"]

Core Building Blocks of Vue Templates

• Text Interpolation ({{ }}): Inserts reactive string or number values as plain text.
• Attribute Binding (:): Binds reactive values to HTML attributes, replacing old mustache attribute syntax.
• Single Expressions: Mustaches accept any single JavaScript expression that evaluates to a value, such as math, method calls, or ternaries.
• Sandboxed Globals: Templates only allow safe globals like Math, Date, and Array by default.

Practical SFC Template Syntax Example

Notice that HTML attributes like :id and :title use : binding rather than {{ }}, while text content inside tags uses double curly braces.

<script setup>
import { ref, computed } from 'vue';

const title = ref('Vue 3 Template Syntax');
const score = ref(85);
const dynamicId = ref('section-header');

const gradeLabel = computed(() => (score.value >= 70 ? 'Passed' : 'Failed'));
</script>

<template>
  <section :id="dynamicId">
    <h2>{{ title }}</h2>

    <p>Next Milestone Score: {{ score + 15 }}</p>
    <p>Status: {{ gradeLabel }} (Score: {{ score }})</p>

    <div :title="`Current score is ${score}`" class="tooltip-box">
      Hover here to inspect the bound title attribute
    </div>
  </section>
</template>

Common Mistakes

• Using Mustaches Inside HTML Attributes: Writing id="{{ dynamicId }}" does not work in Vue. Always bind attributes using v-bind or its shorthand :id="dynamicId".
• Writing Statements Instead of Expressions: Code like {{ const x = 1 }} or {{ if (ok) { return 'Yes' } }} throws a template compile error. Use ternary expressions (ok ? 'Yes' : 'No') or computed() properties instead.
• Stuffing Complex Logic into Templates: Long chained expressions inside {{ }} make templates hard to scan. Extract multi-step formatting into a computed() property inside <script setup>.

Frequently Asked Questions

Does mustache interpolation escape HTML tags automatically?

Yes. Double curly braces {{ value }} render plain text and escape characters like < and >, which protects your app from accidental HTML injection.

How do I bind multiple attributes from an object at once?

Use v-bind="objectOfAttrs" without an argument. Vue applies every key-value pair in that object as an attribute on the element.

Can I display literal double curly braces without Vue evaluating them?

Yes. Add the v-pre directive to an element so Vue skips compiling that element and renders {{ rawText }} literally.