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 नहीं) का मूल्यांकन करता है और परिणाम को 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 UIs लिखने का दिल है।
{{ }} interpolation और v- directives (: / @ shorthands के साथ) का combination आपको dynamic, reactive UI को declaratively व्यक्त करने देता है — HTML जैसा पढ़ने योग्य, लेकिन data-driven।
Common directives में महारत हासिल करना दिन-प्रतिदिन Vue development का अधिकांश भाग है।