قالب ها (Templates)
«قالب (Template)» بخش HTML برنامه Vue است. با قالب، نمایش صفحه را می سازیم؛ مثل طرح دفتر مشق که جای عنوان و متن را مشخص می کند. اینجا تمرکز ما روی استفاده از گزینه template در خود نمونه Vue است.
قالب در Vue چیست؟
می توانیم HTML را داخل گزینه پیکربندی template بنویسیم. این کار، بخش نمایشی را در یک جا جمع می کند؛ درست مثل چسباندن برگه الگو روی میز.
<div id="app"><\/div>
<script src="https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
template: `<h1>{{ message }}<\/h1>\n<p>This is a second line of HTML code, inside back tick quotes<\/p>`,
data() {
return {
message: "Hello World!"
};
}
});
app.mount('#app');
<\/script>
نکته: رشته چندخطی با بک تیک نوشته می شود. بنابراین، HTML طولانی را راحت تر می نویسیم.
کامپوننت تکی (SFC) چیست؟
برای پروژه های بزرگ، کد را به فایل های *.vue منتقل می کنیم. هر فایل سه بخش دارد: <template> برای HTML، <script> برای منطق Vue، و <style> برای CSS. این روش نظم و توسعه را ساده تر می کند.
گام های عملی
- یک ظرف با
idبساز. مثال:app. - نمونه Vue را بساز و گزینه
templateرا پر کن. - در
dataمقدارها را بده و باmountوصل کن.
جمع بندی سریع
- قالب Vue همان HTML برنامه است.
templateمی تواند چندخطی باشد.- SFCها سه بخش استاندارد دارند.
- برای پروژه بزرگ، SFC بهتر است.
ادامه مسیر: برای واکنش به تغییرات، واچرها را ببین. برای مرور همین صفحه با تمرکز سئو، قالب Vue را نشانک کن. همچنین، برای رشد پروژه، بعداً به مقیاس پذیری سر بزن.