What is Vue template syntax (interpolation, directives, expressions)?

Q: What is Vue template syntax (interpolation, directives, expressions)?

**Target Audience:** Beginners who know basic HTML and JavaScript and are reading Vue templates for the first time. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the precise vocabulary. Every rendered output, compiled render function, warning and error message below was produced by running the code on Vue 3.5.44 ( @vue/compiler-dom for compiler output, the repo verifier for mounted components). ## 1. Why This Even Matters — A Story First Think of a printed wedding invitation template from a stationery shop: "Dear ________, you are invited to ________ on ________." The shop prints the fixed words once. The blanks are filled in per guest. Some invitations have extra instructions in the margin: "only print the dinner section if the guest is staying for dinner", "print one line per child". A Vue template is that invitation. The fixed HTML is the printed text. The {{ }} blanks are filled

The problem

Question presented to candidate: "Look at a Vue template for the first time: double curly braces, attributes starting with v-, colons and at-signs. Explain what Vue template syntax is and what you are allowed to write inside it."

What a strong answer should cover:

Templates are valid HTML extended with Vue syntax, and are compiled into JavaScript render functions, not interpreted at runtime as strings.
Text interpolation {{ expr }} puts a value into text and always escapes HTML; raw HTML needs v-html.
Directives are v- attributes with the anatomy v-name:argument.modifier="value"; shorthands : for v-bind, @ for v-on, # for v-slot; dynamic arguments :[name]; the Vue 3.4 same-name shorthand :id.
Bindings accept one JavaScript expression: arithmetic, ternaries, method calls, template literals. Statements like let, if or for are compile errors.
Expressions see the component's state plus a restricted allowlist of globals (such as Math and Date), not window.
Mustaches do not work inside HTML attributes; use v-bind instead.

Clarifying questions expected:

"Should I cover only the template side, or also how it compiles to a render function?"

Code / implementation expected: Optional. A short template showing interpolation, a bound attribute and an event, and ideally one compile error.

vue
templates
syntax

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners who know basic HTML and JavaScript and are reading Vue templates for the first time. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the precise vocabulary. Every rendered output, compiled render function, warning and error message below was produced by running the code on Vue 3.5.44 (@vue/compiler-dom for compiler output, the repo verifier for mounted components).

1. Why This Even Matters — A Story First

Think of a printed wedding invitation template from a stationery shop: "Dear ________, you are invited to ________ on ________." The shop prints the fixed words once. The blanks are filled in per guest. Some invitations have extra instructions in the margin: "only print the dinner section if the guest is staying for dinner", "print one line per child".

A Vue template is that invitation. Th

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueInterpolation, expressions, v-bind, v-on, dynamic arguments and same-name shorthand

Open in playground

<script setup>
import { ref } from "vue";

const name = ref("Ada");
const bio = ref("<b>bold?</b>");
const count = ref(3);
const isBusy = ref(false);
const linkUrl = ref("https://vuejs.org");
const attrName = ref("title");
const id = ref("profile");

function shout(text) {
  return text.toUpperCase() + "!";
}
</script>

<template>
  <!-- 1. Interpolation: text, always HTML-escaped -->
  <p class="t1">Hello, {{ name }}. Bio: {{ bio }}</p>

  <!-- 2. Any single JavaScript expression works inside {{ }} -->
  <p class="t2">{{ count * 2 }} | {{ count > 2 ? "many" : "few" }} | {{ shout(name) }} | {{ Math.max(count, 10) }}</p>

  <!-- 3. Directives: v-bind (:) for attributes, v-on (@) for events -->
  <a class="t3" :href="linkUrl" :[attrName]="'Go to ' + linkUrl">docs</a>
  <button class="t4" :disabled="isBusy" @click="count++">Add ({{ count }})</button>

  <!-- 4. Same-name shorthand (Vue 3.4+): :id means :id="id" -->
  <section class="t5" :id>section</section>

  <!-- 5. Mustaches do NOT work inside attributes -->
  <span class="t6" title="{{ name }}">literal</span>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.