<template> ใช้สำหรับการแสดงผล

Text Interpolation

แสดงข้อความ => ใช้ Text Interpolation

Raw HTML

แสดง Raw HTML => ใช้ v-html

Attribute Bindings

หน้าที่เหมือน HTML attributes แต่เขียนไม่เหมือนกัน ถ้าจะเขียนต้องใช้ v-bind หรือ :

แบบเต็มและแบบเหมือนกัน แต่แบบย่อดูง่ายกว่า

แบบเต็ม => ใช้ v-bind

<template>
	<a v-bind:href="url>Link</a>
</template>

แบบย่อ => :

<template>
	<a :href="url">Link</a>
</template>

JavaScript Expressions

ใน <template> ใช้ ใช้ JavaScript Extensions ได้

<template>
	{{ number + 1 }}
	{{ ok ? 'YES' : 'NO' }}
	{{ message.split('').reverse().join('') }}
	<div :id="`list-${id}`"></div>
</template>

Directive

ใช้ directives เช่น v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model, v-slot, v-pre, v-once, v-memo, v-cloak ได้

<template>
	<p v-if="seen">Now you see me</p>
</template>