Vue templates HTML लाई directives र interpolation सँग बढाइएको हुन्छन् — तपाइँ HTML जस्तो देखिने markup लेख्नुहुन्छ, साथै विशेष 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 होइन) लाई मूल्यांकन गर्छ र परिणामलाई पाठको रूपमा 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 लेख्नको आदर्श तरिका हो — तपाइँ विरलै पूर्ण v-bind:/v-on: रूप देख्नुहुन्छ।
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
पाठ सामग्रीको लागि {{ }} र attribute मानहरूको लागि :attr प्रयोग गर्नुहोस् — तपाइँ attribute भित्र mustaches राख्न सक्नुहुन्न।
Template syntax Vue UIs लेख्नको हृदय हो।
{{ }} interpolation र v- directives (: र @ shorthands सँग) को संयोजनले तपाइँलाई गतिशील, प्रतिक्रियाशील UI लाई घोषणात्मक रूपमा व्यक्त गर्न दिन्छ — HTML जस्तो पठनीय, तर डेटा-संचालित।
सामान्य directives मा निपुणता दैनिक Vue विकास को अधिकांश भाग हो।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्