Vue templates คือ HTML ที่ปรับปรุงด้วย directives และ interpolation — คุณเขียน markup ที่ดูเหมือน HTML บวกกับ attributes พิเศษ (directives ที่ขึ้นต้นด้วย v-) และ {{ }} สำหรับค่าไดนามิก
<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>
{{ }} ประเมินนิพจน์ JavaScript expression (ไม่ใช่ statements) และแสดง result เป็น text โดยอัปเดตโดยอัตโนมัติเมื่อ data เปลี่ยนแปลง
<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: -->
: (bind) และ @ (on) shorthands เป็นวิธี idiomatic ในการเขียน Vue — คุณจะแทบไม่เห็นรูปแบบเต็ม v-bind:/v-on: เลย
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
ใช้ {{ }} สำหรับเนื้อหา text และ :attr สำหรับค่า attribute — คุณไม่สามารถใส่ mustaches ไว้ในตัว attribute
Template syntax คือหัวใจของการเขียน Vue UIs
การรวมกันของ {{ }} interpolation และ v- directives (พร้อม : และ @ shorthands) ช่วยให้คุณแสดง dynamic, reactive UI ได้อย่างชัดเจน — อ่านได้เหมือน HTML แต่ถูกขับเคลื่อนด้วย data
การเชี่ยวชาญ directives ทั่วไป คือส่วนใหญ่ของสิ่งที่ Vue development ประจำวันเกี่ยวข้อง