Vue templates huma HTML imħassra b'directives u interpolation — inti tikteb markup li jidher bħal HTML, flimkien ma' attributes speċjali (directives, li jibdew b'v-) u {{ }} għal valuri dinamiċi.
<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>
{{ }} jevalwa JavaScript expression (mhux statements) u jirrendeŕ ir-riżultat bħala test, itaqqisha awtomatikament meta l-data tinbidel.
<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: -->
The : (bind) u @ (on) shorthands huma l-mod idiomatiku biex tikteb Vue — għad-darba bħala żewġ jidher il-forma sħiħa v-bind:/v-on:.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Uża {{ }} għal content tat-test u :attr għal valuri ta' attribute — int ma tistax tpoġġi mustaches ġewwa attribute.
Is-syntax tat-template hu l-qalb tal-kitba ta' Vue UIs.
Il-kombinazzjoni ta' {{ }} interpolation u v- directives (ma' : u @ shorthands) tippermettilok li tesprimiha UI dinamiku, reakttivu deklarattivu — li jaqra bħal HTML, iżda data-driven.
L-master tal-directives komuni huwa ħafna mill-istħarriġ ta' Vue development ta' kuljum.