Vue templates হল HTML enhanced with directives and interpolation — আপনি HTML এর মতো markup লেখেন, এর সাথে বিশেষ attributes (directives, যা v- দিয়ে শুরু) এবং {{ }} dynamic values এর জন্য।
<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 evaluate করে (statements নয়) এবং ফলাফল text হিসেবে render করে, যখন 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 হল Vue লেখার idiomatic উপায় — আপনি বিরল ক্ষেত্রে সম্পূর্ণ v-bind:/v-on: form দেখবেন।
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Text content এর জন্য {{ }} ব্যবহার করুন এবং attribute values এর জন্য :attr ব্যবহার করুন — আপনি একটি attribute এর ভিতরে mustaches রাখতে পারবেন না।
Template syntax হল Vue UI লেখার হৃদয়।
{{ }} interpolation এবং v- directives (: এবং @ shorthands সহ) এর সমন্বয় আপনাকে dynamic, reactive UI declaratively প্রকাশ করতে দেয় — HTML এর মতো readable, কিন্তু data-driven।
সাধারণ directives এ mastery অর্জন করা দিনের পর দিন Vue development এর বেশিরভাগ কাজ জড়িত।