Vue templates అనేది directives మరియు interpolation తో మెరుగైన HTML — మీరు HTMLలా కనిపించే markup వ్రాస్తారు, ప్లస్ ప్రత్యేక attributes (v- తో ప్రారంభమయ్యే directives) మరియు 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: పూర్తి రూపం చాలా అరుదుగా చూస్తారు.
<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 లో చేర్చబడిన చాలా ఎక్కువ భాగం.