Template Syntax

Vue templates use an HTML-based syntax that allows you to declaratively bind data to the rendered DOM.

Common Features

Interpolations: {{ message }}
Directives: v-if, v-for, v-bind, v-on
Event handling: @click="doSomething"

Text Interpolation

Use double curly braces (mustache syntax) to display data:

<span>Message: {{ msg }}</span>

Raw HTML

To output raw HTML, use the v-html directive:

<p v-html="rawHtml"></p>

Warning: Only use v-html with trusted content to avoid XSS vulnerabilities.

Attribute Bindings

Use v-bind (or : shorthand) to bind attributes dynamically:

<div :id="dynamicId"></div>
<button :disabled="isDisabled">Button</button>

Using JavaScript Expressions

You can use JavaScript expressions in bindings:

<span>{{ number + 1 }}</span>
<span>{{ ok ? 'YES' : 'NO' }}</span>

Directives

Directives are special attributes with the v- prefix. Common ones include:

v-if, v-else, v-else-if for conditional rendering
v-for for list rendering
v-bind for binding attributes
v-on for event handling

Shorthands

: for v-bind
@ for v-on

Example

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Add</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello!')
function increment() { /* ... */ }
</script>