Template Syntax
Vue templates are valid HTML extended with a small set of special syntax that lets you bind the rendered DOM to underlying component state. Under the hood, Vue compiles templates into highly optimized JavaScript render functions, so what looks like simple HTML markup is actually compiled ahead of time (or at runtime, if using the runtime-only build) into efficient virtual DOM creation code. This gives you the readability of HTML with the performance of hand-written render functions.
Cricket analogy: Like a coach's simple hand-drawn field placement diagram that gets translated behind the scenes into a precise GPS-tracked fielding algorithm, giving players an easy-to-read chart backed by exact computed positions.
Text Interpolation and Directives
The most basic form of binding is text interpolation using "mustache" double-curly-brace syntax, {{ expression }}, which is replaced with the stringified value of the JavaScript expression inside it and updates automatically whenever the underlying reactive data changes. Beyond text, Vue provides directives — special attributes prefixed with v- — that apply reactive behavior to elements. Common directives include v-bind (dynamically bind an attribute), v-on (attach an event listener), v-if/v-show (conditional rendering), and v-for (list rendering). Directive values are also full JavaScript expressions, not just strings, so you can write v-bind:disabled="isLoading || !isValid".
Cricket analogy: Like a scoreboard's live run total (mustache interpolation) that updates the instant a boundary is scored, while separate signal flags (directives) control whether the 'DRS Review' light shows, whistle sounds on a wicket, or the batting lineup list refreshes.
Shorthand Syntax
Because v-bind and v-on are used so frequently, Vue provides shorthand notations: : for v-bind (e.g. :src="imageUrl") and @ for v-on (e.g. @click="handleClick"). These shorthands are functionally identical to the full directive names and are the idiomatic style in nearly all modern Vue codebases. Vue 3.4+ also supports a v-bind object shorthand where :foo can be written as :foo with a same-named variable, though the colon-and-at-sign shorthands remain the primary convention developers rely on daily.
Cricket analogy: Like how commentators shorten 'leg before wicket' to just 'LBW' — the abbreviated call means exactly the same ruling but is what every broadcaster actually uses on air.
<script setup>
import { ref } from 'vue'
const username = ref('')
const avatarUrl = ref('/avatars/default.png')
const isSubmitting = ref(false)
function handleSubmit() {
isSubmitting.value = true
}
</script>
<template>
<div class="profile-card">
<img :src="avatarUrl" :alt="`${username}'s avatar`" />
<p>Welcome, {{ username || 'Guest' }}!</p>
<button :disabled="isSubmitting" @click="handleSubmit">
{{ isSubmitting ? 'Submitting…' : 'Submit' }}
</button>
</div>
</template>Unlike JSX, where you write actual JavaScript with embedded markup, Vue templates are constrained to expressions (not statements) inside interpolations and directive bindings — you can write count + 1 or a ternary, but not if statements or variable declarations directly in a template. This constraint is what allows Vue's compiler to perform aggressive static analysis and optimization.
Interpolation with {{ }} always renders text content and HTML-escapes it automatically for XSS safety. To render raw HTML you must use the v-html directive, and doing so with untrusted user input is a serious security risk — only use v-html with content you trust or have sanitized.
- Vue templates are HTML extended with mustache interpolation ({{ }}) and v-prefixed directives.
- Templates compile to optimized virtual DOM render functions ahead of time.
- : is shorthand for v-bind, and @ is shorthand for v-on — both are idiomatic Vue style.
- Directive and interpolation values are full JavaScript expressions, evaluated in the component's scope.
- {{ }} auto-escapes content; v-html is required (and risky) for rendering raw HTML.
- Templates only allow expressions, not statements, enabling compiler-level optimizations.
Practice what you learned
1. What is the shorthand syntax for v-bind:src?
2. What is the shorthand syntax for v-on:click?
3. What does {{ }} interpolation do with its content by default?
4. Which directive should be used to render raw, unescaped HTML from a bound expression?
5. Can a Vue template interpolation contain a JavaScript statement like `if (x) { ... }`?
Was this page helpful?
You May Also Like
Conditional Rendering: v-if and v-show
Explains Vue's two conditional rendering directives, how they differ at the DOM level, and how to choose the right one for performance and correctness.
List Rendering with v-for
Covers how v-for renders lists and objects in Vue templates, why the key attribute matters, and common performance and correctness pitfalls.
Event Handling with v-on
Explains how Vue's v-on directive (shorthand @) wires DOM and custom component events to handlers, including inline expressions, method handlers, and modifiers.
Form Input Bindings with v-model
Details how v-model implements two-way binding on form elements and components, what it compiles down to, and its modifiers and pitfalls.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics