Template Syntax ​

Vue از سینتکس تمپلیت که برپایه HTML گسترش یافته استفاده می‌کند، و این اجازه رو به شما می‌دهد تا DOM نمایش داده شده را به دیتای موجود در کامپوننت متصل کنید. تمام تمپلیت‌های Vue از لحاظ سینتکس، HTML معتبر هستند که می‌توانند توسط مرورگرها و تحلیل کننده‌های HTML تحلیل شوند.

در زیر کاپوت، Vue تمپلیت‌ها را به کد جاوااسکریپت بسیار بهینه شده کامپایل می‌کند. همراه با سیستم reactivity، فریمورک Vue می‌تواند بصورت هوشمندانه حداقل تعداد کامپوننت‌هایی که باید مجددا رندر شوند را پیدا کند و در هنگام تغییر state برنامه، حداقل دستکاری‌های DOM را اعمال کند.

اگر با Virtual DOM آشنا هستید و قدرت جاوااسکریپت خام را ترجیح می‌دهید، شما همچنین می‌توانید مستقیما از Render Functions بجای تمپلیت‌ها، با پشتیبانی اختیاری از JSX استفاده کنید.

درج متن ​

پایه‌ای ترین شکل data binding (اتصال داده) درج متن با سینتکس Mustache (دو آکولاد) می‌باشد:

<span>پیام: {{ msg }}</span>

قسمت آکولاد دوتایی با مقدار درون msg، که یک پراپرتی از نمونه ساخته شده از کامپوننت مربوطه هست، جایگزین خواهد شد. همچنین این مقدار با هر تغییر در پراپرتی msg بروزرسانی خواهد شد.

HTML خام ​

آکولاد دوتایی داده را به عنوان متن ساده تفسیر می‌کند. برای خروجی HTML واقعی باید از دایرکتیو v-html استفاده کنید.

<p>استفاده از حالت عادی درج متن : {{ rawHtml }}</p>
<p>v-html استفاده از دایرکتیو : <span v-html="rawHtml"></span></p>

در اینجا ما با چیز جدیدی روبرو شدیم. اتریبیوت v-html که مشاهده می‌کنید، دایرکتیو نامیده می‌شوند. دایرکتیوها پیشوند v-‎ دارند تا نمایش دهنده این باشد که آنها اتریبیوت خاصی هستند که توسط Vue عرضه شده‌اند و همانطور که ممکن است حدس زده باشید، آنها رفتار reactive ویژه ای را به DOM رندر شده اعمال می کنند. در اینجا ما می‌گوییم "HTML داخلی این عنصر را با ویژگی rawHtml در نمونه فعال فعلی به‌روز نگه دار."

محتوای span با مقدار پراپرتی rawHtml جایگزین خواهد شد، که بعنوان HTML ساده تفسیر می‌شود. اتصال دیتا در اینجا نادیده گرفته می‌شود. در نظر داشته باشید که شما نمی‌توانید از v-html برای بایند بخشی از تمپلیت استفاده کنید، زیرا که Vue یک موتور قالب‌بندی برپایه استرینگ نیست. در عوض، کامپوننت‌ها به عنوان بخش‌های اساسی برای استفاده مجدد و اتصال UI ترجیح داده می شوند.

اتصال اتریبیوت | Attribute Bindings ​

آکولادها نمی‌توانند در اتریبیوت‌های HTML استفاده شوند. در عوض یک دایرکتیو v-bind داریم:

<div v-bind:id="dynamicId"></div>

در اینجا دایرکتیو v-bind به Vue دستور می‌دهد تا اتریبیوت id المنت را برابر با پراپرتی dynamicId در کامپوننت نگهدارد. اگر مقدار مقید شده برابر با null یا undefined باشد، اتریبیوت از المنت رندر شده حذف خواهد شد.

مختصر نویسی ​

به این دلیل که v-bind استفاده خیلی رایجی دارد. یک قاعده دستوری اختصاصی مختصر نویسی دارد:

<div :id="dynamicId"></div>

اتریبیوت‌هایی که با : شروع می‌شوند ممکن است کمی نسبت به HTML عادی متفاوت بنظر برسند، اما این درواقع یک کاراکتر صحیح برای نام‌های اتریبیوت است و تمام مرورگرهایی که از Vue پشتیبانی می‌کنند، می‌توانند آن را بدرستی پارس کنند. علاوه بر این، آنها در html رندر شده نهایی ظاهر نمی‌شوند. استفاده از این خلاصه نویسی اختیاری می‌باشد، اما زمانی که بعداً در مورد استفاده از آن بیشتر بدانید، احتمالاً از وجود آن قدردانی خواهید کرد.

برای بقیه راهنما، ما از دستور مختصر در مثال‌های کد استفاده خواهیم کرد، زیرا این رایج‌ترین روش استفاده برای توسعه‌دهندگان Vue است.

میانبر نام یکسان ​

اگر اتریبیوت نام یکسانی با مقدار جاوااسکریپت اتصال شده داشته باشد، سینتکس می‌تواند بیشتر کوتاه شود به شکلی که مقدار اتریبیوت حذف شود:

<!-- :id="id" همانند -->
<div :id></div>

<!-- این هم کار می‌کند -->
<div v-bind:id></div>

این مشابه سینتکس میانبر ویژگی در هنگام تعریف آبجکت در JavaScript است. توجه داشته باشید این ویژگی تنها در Vue 3.4 و بالاتر در دسترس است.

اتریبیوت‌های بولین ​

اتریبیوت‌های بولین اتریبیوت‌هایی هستند که می‌تواند true / false بودن مقادیر را با حضور آنها بر یک المنت نشان داد. برای مثال، disabled یکی رایج ترین اتریبیوت‌های بولین استفاده شده می‌باشد.

v-bind در این مورد مقداری متفاوت عمل می‌کند:

<button :disabled="isButtonDisabled">دکمه</button>

اگر isButtonDisabled یک مقدار truthy داشته باشد شامل اتریبیوت disabled خواهد شد. همچنین اگر مقدار یک رشته خالی باشد، برای حفظ سازگاری با ‎<button disabled="">‎ شامل خواهد شد. برای بقیه مقدارهای falsy اتریبیوت حذف خواهد شد.

اتصال چندین اتریبیوت بصورت پویا ​

اگر یک آبجکت جاوااسکریپت دارید که چندین اتریبیوت را نمایش می‌دهد که مانند این است:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

شما می‌توانید آنها را با یک المنت واحد با استفاده از v-bind بدون آرگومان متصل کنید:

<div v-bind="objectOfAttrs"></div>

استفاده از عبارات جاوااسکریپت ​

تا کنون ما فقط به اتصال پراپرتی ساده در تمپلیت خود پرداختیم. اما Vue درواقع بطور قوی از عبارات جاوااسکریپت (JavaScript expressions) در داخل data bindingها پشتیبانی می‌کند.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

این عبارات به عنوان جاوااسکریپت در اسکوپ داده نمونه ساخته شده از کامپوننت فعلی ارزیابی خواهند شد.

در تمپلیت‌های Vue، عبارات جاوااسکریپت می‌توانند در جایگاه‌های زیر استفاده شوند

• داخل interpolations متن (آکولادها)
• در مقدارهای اتریبیوت‌های هر یک از دایرکتیوهای Vue (اتریبیوت‌های خاصی که با v-‎ آغاز می‌شوند)

فقط عبارات ​

هر اتصال می‌تواند فقط شامل یک تک اصطلاح (expressions) باشد. یک تکه از کدی است که می‌تواند برابر با یک مقداری باشد. یک بررسی ساده این است که آیا می توان از آن پس از "return" استفاده کرد یا خیر.

بنابراین موارد زیر کار نمی‌کند

<!-- expression است، نه statement این یک -->
{{ var a = 1 }}

<!-- استفاده کنید ternary کنترل جریان نیز کار نمی کند، از عبارت‌های -->
{{ if (ok) { return message } }}

فراخوانی توابع ​

می توان یک متد در کامپوننت را در داخل یک عبارت binding فراخوانی کرد:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

دسترسی سراسری محدود شده ​

عبارات درون تمپلیت سندباکس هستند و فقط به فهرست محدودی از globals دسترسی دارند. این فهرست globals مواردی که رایج‌ در استفاده هستند را نمایش می‌دهد، مانند Math و Date.

globals هایی به صراحت در این لیست گنجانده نشده‌اند، برای مثال پراپرتی‌های پیوست شده توسط کاربر به window، در عبارات تمپلیت دسترس نخواهد بود. شما می‌توانید بطور صریح globals های بیشتر برای تمام عبارات Vue با افزودن آنها به app.config.globalProperties تعریف کنید.

دایرکتیوها ​

دایرکتیوها اتریبیوت‌های ویژه‌ای با پیشوند v-‎ هستند. فریمورک Vue تعدادی دایرکتیو داخلی فراهم می‌کند، از جمله v-html و v-bind که بالاتر معرفی کردیم.

مقادیر اتریبیوت دایرکتیو مورد انتظار است تا یک تک عبارت جاوااسکریپتی باشد (با استثنا v-for، v-on و v-slot، که بعدا در بخشهای مربوط به آنها مورد بحث قرار خواهد گرفت). کار یک دایرکتیو اعمال کردن تغییرات به DOM بصورت reactive می‌باشد وقتی که مقدار عبارت آن تغییر می‌کند. v-if را به عنوان مثال درنظر بگیرید:

<p v-if="seen">حالا منو می‌بینی</p>

اینجا دایرکتیو v-if، المنت <p> را افزوده / حذف خواهد کرد بر پایه درستی مقدار عبارت seen.

آرگومان‌ها ​

بعضی دایرکتیوها می‌توانند یک "آرگومان" داشته باشد که که بعد از نام دایرکتیو با علامت دو نقطه نشان داده می شود. برای مثال، دایرکتیو v-bind بصورت reactive بعنوان اتریبیوت HTML آپدیت می‌شود:

<a v-bind:href="url"> ... </a>

<!-- بطور خلاصه -->
<a :href="url"> ... </a>

در اینجا، href یک آرگومان است، که به دایرکتیو v-bind میگوید تا اتریبیوت href این المنت را با مقدار عبارت url متصل کند. به عبارت دیگر، هرچیزی قبل از آرگومان (یعنی، v-bind:‎) به یک تک کاراکتر فشرده شد است، :.

مثال دیگر دایرکتیو v-on می‌باشد، که به رویدادهای DOM گوش می‌کند:

<a v-on:click="doSomething"> ... </a>

<!-- بطور خلاصه -->
<a @click="doSomething"> ... </a>

در اینجا، آرگومان نام رویداد برای گوش دادن به: click می‌باشد. v-on یک اختصار متناظر دارد، یعنی کاراکتر @. ما در مورد مدیریت رویداد با جزئیات بیشتری صحبت خواهیم کرد.

آرگومان‌های پویا ​

استفاده یک عبارت جاوااسکریپت در آرگومان دایرکتیو آرگومان با قرار دادن آن در براکت نیز امکان پذیر است:

<!--
توجه داشته باشید که برای آرگومان‌ها، برخی محدودیت‌ها وجود دارد
همان‌طور که در بخش‌های "محدودیت‌های مقدار آرگومان پویا" و "محدودیت‌های دستور زبان آرگومان پویا" توضیح داده شده است.
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- بطور خلاصه -->
<a :[attributeName]="url"> ... </a>

در اینجا، attributeName بطور پویا بعنوان یک عبارت جاوااسکریپت ارزیابی می‌شود، و مقدار ارزیابی شده بعنوان مقدار نهایی برای آرگومان استفاده خواهد شد. برای مثال، اگر کامپوننت شما یک پراپرتی داده دارد، attributeName، که مقدارش برابر با "href" می‌باشد، سپس برابر با v-bind:href خواهد شد.

به همین ترتیب، شما می‌توانید از آرگومان‌های پویا جهت اتصال کردن یک هندلر برای نام رویداد پویا استفاده کنید:

<a v-on:[eventName]="doSomething"> ... </a>

<!-- بطور اختصار -->
<a @[eventName]="doSomething"> ... </a>

در این مثال، وقتی مقدار eventName برابر با "focus" باشد، v-on:[eventName] برابر با v-on:focus خواهد بود.

محدودیت‌های مقدار آرگومان پویا ​

از آرگومان‌های پویا انتظار میروند تا به یک رشته تبدیل شوند، به استثنای null. مقدار خاص null می‌تواند استفاده شود تا بطور واضح متصل شدن را پاک کند.

محدودیت‌های سینتکس آرگومان پویا ​

عبارات آرگومان پویا تعدادی محدودیت‌های سینکتسی دارند بدلیل کاراکترهای مشخص، از جمله فضاهای خالی و کوتیشن‌ها، نامهای نادرست درون اتریبیوت HTML می‌باشد. برای مثال، کد زیر نادرست است:

<!-- این یک اخطار کامپایلر را ایجاد می کند. -->
<a :['foo' + bar]="value"> ... </a>

اگر شما نیاز دارید تا یک آرگومان پویا پیچیده ارائه بدید، احتمالا بهتر می‌شود تا یک پراپرتی computed استفاده کنید، که بزودی به آن خواهیم پرداخت.

هنگام استفاده از تمپلیت‌های in-DOM (تمپلیت‌هایی که مستقیما در یک فایل HTML نوشته شده اند)، شما همچنین باید از نامگذاری کلیدها با حروف بزرگ پرهیز کنید. همانطور که مرورگرها نام اتریبیوت‌ها را به حروف کوچک تبدیل می‌کنند:

<a :[someAttr]="value"> ... </a>

موارد فوق در تمپلیت‌های in-DOM به ‎:[someattr] تبدیل خواهند شد. اگر کامپوننت شما یک پراپرتی someAttr به جای someattr دارد، کد شما کار نخواهد کرد. تمپلیت‌های داخلی و تمپلیت‌های تک فایلی مشمول این محدودیت نیستند.

Modifiers ​

modifierها پسوندهای خاصی هستند که با نقطه جدا می‌شوند، که نشان می دهد یک دایرکتیو باید به نحوی خاص عمل کند. برای مثال، ‎.prevent به دایرکتیو v-on میگوید تا event.preventDefault()‎ را برای رویداد اجرا شده صدا بزند.

<form @submit.prevent="onSubmit">...</form>

شما بعدا مثال‌های بیشتری در رابطه با modifierها خواهید دید، برای v-on و برای v-model، وقتی ما آن ویژگی‌ها را مرور کنیم.

و در پایان، در اینجا سینکتس کامل دایرکتیو به تصویر کشیده شده است: