Template Syntax

Vue templates are valid HTML enhanced with mustache interpolation and v- directives for binding and events.

4 min read Level 1/5 #vue#templates

What you'll learn

Use mustache interpolation
Bind attributes with v-bind
Listen to events with v-on

A Vue template is just HTML with two extras: {{ }} for interpolation and v- directives for behavior. Anything inside {{ }} or directive expressions is a single JavaScript expression.

Mustache Interpolation

<script setup>
import { ref } from 'vue'
const count = ref(3)
</script>

<template>
  <p>Count is {{ count }}</p>
  <p>Doubled: {{ count * 2 }}</p>
</template>

Only expressions work — statements like let x = 1 or if blocks do not.

Binding Attributes With v-bind

v-bind:attr (shorthand :attr) sets an attribute reactively.

<template>
  <input :value="name" :disabled="isLocked" />
  <a :href="url" :class="{ active: isActive }">Link</a>
</template>

Listening With v-on

v-on:event (shorthand @event) attaches a listener.

<script setup>
import { ref } from 'vue'
const count = ref(0)
const inc = () => count.value++
</script>

<template>
  <button @click="inc">+1</button>
  <button @click="count++">+1 inline</button>
  <input @keyup.enter="submit" />
</template>

Modifiers like .enter, .prevent, and .stop save you from writing boilerplate event-handling code.

Raw HTML — v-html

{{ }} always escapes. To render trusted HTML, use v-html (and only with trusted input — XSS risk).

<template>
  <div v-html="rawHtml" />
</template>

Reactivity — ref() & reactive() →