A Vue sablonok HTML, amely irányelvekkel és interpolációval bővített — olyan jelölést írunk, amely HTML-nek tűnik, valamint speciális attribútumok (irányelvek, v- kezdetűek) és {{ }} a dinamikus értékekhez.
<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>
A {{ }} egy JavaScript kifejezést (nem utasításokat) értékel ki, és az eredményt szövegként jeleníti meg, automatikusan frissítve az adatok változásakor.
<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: -->
A : (bind) és @ (on) rövidítések a Vue írásának idiomatikus módja — ritkán látod majd a teljes v-bind:/v-on: formát.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Használd a {{ }} szövegkerületre és a :attr attribútumértékekhez — nem tehetsz bajuszokat az attribútumon belülre.
A sablonsintaxis a Vue UI-k írásának szíve.
A {{ }} interpoláció és a v- irányelvek (: / @ rövidítésekkel) kombinációja lehetővé teszi, hogy dinamikus, reaktív felhasználói felületet fejezz ki deklaratívan — olvasható, mint a HTML, de adatvezérelt.
A közös irányelvek elsajátítása a napi Vue fejlesztés nagyobb részét jelenti.