Vue templates zijn HTML verrijkt met directives en interpolation — je schrijft markup die eruitziet als HTML, plus speciale attributen (directives, beginnend met v-) en {{ }} voor dynamische waarden.
<template>
<h1>{{ title }}</h1> <!-- inserts the value of `title` -->
<p>{{ count * 2 }}</p> <!-- any JS expression works -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- ternaries, method calls, etc. -->
</template>
{{ }} evalueert een JavaScript expression (geen statements) en rendert het resultaat als tekst, die automatisch wordt bijgewerkt wanneer de data verandert.
<template>
<p v-if="loggedIn">Welcome</p> <!-- conditional rendering -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- loops -->
<img :src="imageUrl" /> <!-- v-bind: bind an attribute -->
<button @click="submit">Send</button> <!-- v-on: handle an event -->
<input v-model="name" /> <!-- two-way binding -->
</template>
<a :href="url">link</a> <!-- : is short for v-bind: -->
<button @click="fn">go</button> <!-- @ is short for v-on: -->
De : (bind) en @ (on) shorthands zijn de idiomatische manier om Vue te schrijven — je ziet zelden de volledige v-bind:/v-on: vorm.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Gebruik {{ }} voor tekstinhoud en :attr voor attributewaarden — je kunt geen snorreharen in een attribuut plaatsen.
Template syntax is het hart van het schrijven van Vue UI's.
De combinatie van {{ }} interpolation en v- directives (met : en @ shorthands) stelt je in staat om dynamische, reactieve UI declaratief uit te drukken — leesbaar als HTML, maar gegevensgestuurd.
Het beheersen van de veelgebruikte directives is het meeste van wat dagelijks Vue-ontwikkeling inhoudt.