Vue <template> Element
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
বিল্ট-ইন <টেমপ্লেট> উপাদান ব্যবহার করে এইচটিএমএল কোডের একটি অংশকে ভি-ইফ কৌশল দিয়ে প্রতিস্থাপন করা।
<ul>
<li>Trolltunga</li>
<template v-if="display">
<li>Potato Point</li>
<li>The souks of Marrakech</li>
<li>Dry Tortugas</li>
<li>Halong Bay</li>
</template>
<li>...</li>
</ul>সংজ্ঞা এবং প্রয়োগ
<টেমপ্লেট> অ্যাপ্লিকেশন প্রকার
গ্রুপিং
একাধিক উপাদানকে একত্রিত করে
রেন্ডার করা হয়নি
DOM এ রেন্ডার করা হবে না
Vue কৌশল
ভি-ইফ, ভি-ফর, ভি-স্লটের সাথে ব্যবহার
V-if, v-else-if, v-else, v-for, অথবা v-slot ব্যবহার করার সময় HTML <template> ট্যাগটি একটি নেস্টেড Vue <template> উপাদানে পরিণত হয়।
সঙ্গে v-যদি, v-অন্য-যদি, v-অন্যায়, v-এর জন্য
যখন v-if, v-else-if, v-else, অথবা v-for ব্যবহার করা হয়, নেস্টেড <template> উপাদানটি HTML কোডের একটি অংশ রেন্ডার করে।
ভি-স্লট সহ
যখন ভি-স্লটের সাথে ব্যবহার করা হয়, নেস্টেড <টেমপ্লেট> উপাদানটি নির্দিষ্ট স্লটে HTML কোডের একটি অংশ নির্দেশ করে। নিচে উদাহরণ 1 দেখুন।
গুরুত্বপূর্ণ নোট:
একটি নেস্টেড <টেমপ্লেট> উপাদান নিজেকে একটি DOM উপাদান হিসাবে রেন্ডার করবে না।
দ্রষ্টব্য:
SFCs (*.vue) ফাইলগুলি ব্যবহার করার সময় শীর্ষ-স্তরের <টেমপ্লেট> উপাদানটি একটি কনফিগারেশন প্রয়োজনীয়তা। এই ধরনের শীর্ষ-স্তরের <টেমপ্লেট> উপাদানগুলির জন্য, Vue পদ্ধতি প্রয়োগ করা যাবে না।
আরো উদাহরণ
উদাহরণ 1
একাধিক উপাদান একত্রিত করতে একটি অন্তর্নির্মিত <টেমপ্লেট> উপাদান ব্যবহার করে এবং v-স্লট কৌশল সহ একটি নির্দিষ্ট নামযুক্ত স্লটে পাঠান।
<template>
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
</template>স্লট সংযোগ:
<টেমপ্লেট> উপাদান একাধিক উপাদানকে একক স্লটে সংযুক্ত করার অনুমতি দেয়, নমনীয় বিষয়বস্তু পরিচালনা প্রদান করে।
উদাহরণ 2
<টেমপ্লেট> উপাদান ব্যবহার করে, আপনি v-if কৌশলের সাথে একাধিক উপাদান রেন্ডার করতে পারেন।
<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>শর্তাধীন গ্রুপিং:
<টেমপ্লেট> উপাদানটি অতিরিক্ত DOM উপাদান এড়িয়ে একাধিক উপাদানকে একই অবস্থার অধীনে গোষ্ঠীবদ্ধ করার অনুমতি দেয়।
ব্যবহারিক ব্যবহারের ক্ষেত্রে
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
কোন নেস্টেড এলিমেন্টটি একাধিক এইচটিএমএল এলিমেন্টকে একসাথে গোষ্ঠীবদ্ধ করতে ব্যবহার করা হয় কিন্তু অতিরিক্ত DOM এলিমেন্ট এড়িয়ে যায়?
< v-if="showContent">
<h2>Section Title</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</ >