Vue templates HTML ہیں جو directives اور interpolation سے بہتر ہوئے ہیں — آپ markup لکھتے ہیں جو HTML جیسا لگتا ہے، اور خصوصی 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 (statements نہیں) کو evaluate کرتا ہے اور نتیجہ کو ٹیکسٹ کے طور پر render کرتا ہے، جب data بدلے تو خود بخود update ہوتا ہے۔
<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: کی مکمل شکل کم ہی دیکھنی پڑے گی۔
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Text content کے لیے {{ }} اور attribute values کے لیے :attr استعمال کریں — آپ کسی attribute میں mustaches نہیں ڈال سکتے۔
Template syntax Vue UIs لکھنے کا دل ہے۔
{{ }} interpolation اور v- directives (: اور @ shorthands کے ساتھ) کا امتزاج آپ کو dynamic، reactive UI کو declaratively ظاہر کرنے دیتا ہے — HTML جیسا پڑھنے میں آسان، لیکن data-driven۔
عام directives میں مہارت حاصل کرنا روز مرہ Vue development کا زیادہ تر حصہ ہے۔