I template di Vue sono HTML potenziato con direttive e interpolazione — scrivi markup che sembra HTML, più attributi speciali (direttive, che iniziano con v-) e {{ }} per valori dinamici.
<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>
{{ }} valuta un'espressione JavaScript (non istruzioni) e renderizza il risultato come testo, aggiornandosi automaticamente quando i dati cambiano.
<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: -->
Le scorciatoie : (bind) e @ (on) sono il modo idiomatico di scrivere Vue — raramente vedrai la forma completa v-bind:/v-on:.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Usa {{ }} per il contenuto testuale e :attr per i valori degli attributi — non puoi mettere baffi dentro un attributo.
La sintassi dei template è il cuore della scrittura di UI in Vue.
La combinazione dell'interpolazione {{ }} e delle direttive v- (con le scorciatoie :/@) ti permette di esprimere UI dinamica e reattiva in modo dichiarativo — leggibile come HTML, ma basata sui dati.
Padroneggiare le direttive comuni è la maggior parte di quello che lo sviluppo quotidiano di Vue comporta.