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 કરે છે અને પરિણામને 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દૃષ્ટિકોણ છે — તમે rarely સંપૂર્ણ 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 માટે માસ્ટર કરવું એ day-to-day Vue development નો મોટોભાગ છે।