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 नाही) मूल्यांकन करते आणि परिणाम text म्हणून render करते, डेटा बदलल्यावर स्वयंचलितपणे अपडेट होते.
<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 सह) चे combination तुम्हाला गतिशील, reactive UI declaratively व्यक्त करण्यास देते — HTML सारखे वाचनीय, परंतु डेटा-चालित.
सामान्य directives वर प्रभुत्व मिळवणे हे दिवसेंदिवसाच्या Vue development च्या बहुतेकच काम आहे.