Skip to content

Commit

Permalink
Update sfc-spec.md
Browse files Browse the repository at this point in the history
  • Loading branch information
mohammadshg84 authored Jun 24, 2024
1 parent 0d72e32 commit 271783b
Showing 1 changed file with 18 additions and 18 deletions.
36 changes: 18 additions & 18 deletions src/api/sfc-spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

کامپوننت تک فایلی (SFC) در Vue که معمولاً از پسوند فایل ‎`*.vue` استفاده می‌کند، یک تمپلیت فایل سفارشی است که از سینتکسی شبیه به HTML برای توصیف یک کامپوننت Vue استفاده می‌کند. کامپوننت تک فایلی (SFC) از نظر سینتکس با HTML سازگار است.

هر فایل &lrm;`*.vue` از سه نوع بلوک زبان سطح بالا تشکیل شده است: `<template>` و `<script>` و `<style>` و همچنین می‌توان به صورت اختیاری بلوک های سفارشی اضافه کرد:
هر فایل &lrm;`*.vue` از سه نوع بلوک زبان سطح بالا تشکیل شده است: `<template>` و `<script>` و `<style>` و همچنین می‌توان به صورت اختیاری بلوکهای سفارشی اضافه کرد:

```vue
<template>
Expand Down Expand Up @@ -32,35 +32,35 @@ export default {
</custom1>
```

## بلوک های زبان {#language-blocks}
## بلوکهای زبان {#language-blocks}

### `<template>` {#template}

- هر فایل &lrm;`*.vue` می تواند حداکثر یک بلوک `<template>` در سطح بالا داشته باشد.
- هر فایل &lrm;`*.vue` میتواند حداکثر یک بلوک `<template>` در سطح بالا داشته باشد.

- محتویات این بلوک استخراج و به `vue/compiler-dom@` منتقل می‌شوند، از قبل در توابع رندر جاوا اسکریپت کامپایل می‌شوند و به‌عنوان آپشن `render` به کامپوننت صادر شده پیوست می‌شوند.

### `<script>` {#script}

- هر فایل &lrm;`*.vue` می تواند حداکثر یک بلوک `<script>` داشته باشد (به استثنای [`<script setup>`](/api/sfc-script-setup)).
- هر فایل &lrm;`*.vue` میتواند حداکثر یک بلوک `<script>` داشته باشد (به استثنای [`<script setup>`](/api/sfc-script-setup)).

- اسکریپت به عنوان یک ماژول ES اجرا می شود.
- اسکریپت به عنوان یک ماژول ES اجرا میشود.

- در این بلوک، **default export** باید یک آبجکت از آپشن های کامپوننت Vue باشد، چه به‌عنوان یک آبجکت ساده یا به‌عنوان مقدار بازگشتی از [defineComponent](/api/general#definecomponent).
- در این بلوک، **default export** باید یک آبجکت از آپشنهای کامپوننت Vue باشد، چه به‌عنوان یک آبجکت ساده یا به‌عنوان مقدار بازگشتی از [defineComponent](/api/general#definecomponent).

### `<script setup>` {#script-setup}

- هر فایل &lrm;`*.vue` می تواند حداکثر یک بلوک `<script setup>` داشته باشد (به استثنای `<script>` معمولی).
- هر فایل &lrm;`*.vue` میتواند حداکثر یک بلوک `<script setup>` داشته باشد (به استثنای `<script>` معمولی).

- اسکریپت از قبل پردازش شده و به عنوان تابع کامپوننت `()setup` استفاده می شود، به این معنی که **برای هر نمونه (Instance) از کامپوننت** اجرا می شود. پیوندهای سطح بالا در `<script setup>` به طور خودکار در template قرار می گیرند. برای جزئیات بیشتر، [اسناد اختصاصی در `<script setup>`](/api/sfc-script-setup) را ببینید.
- اسکریپت از قبل پردازش شده و به عنوان تابع کامپوننت `()setup` استفاده میشود، به این معنی که **برای هر نمونه (Instance) از کامپوننت** اجرا میشود. پیوندهای سطح بالا در `<script setup>` به طور خودکار در template قرار میگیرند. برای جزئیات بیشتر، [اسناد اختصاصی در `<script setup>`](/api/sfc-script-setup) را ببینید.

### `<style>` {#style}

- یک فایل &lrm;`*.vue` می‌تواند حاوی چندین تگ `<style>` باشد.

- یک تگ `<style>` می‌تواند دارای ویژگی‌های `scoped` یا `module` باشد (برای جزئیات بیشتر به [SFC Style Features](/api/sfc-css-features) مراجعه کنید) تا به کپسوله کردن استایل ها در کامپوننت فعلی کمک کند. چندین تگ `<style>` با حالت‌های کپسوله‌سازی متفاوت را می‌توان در یک کامپوننت یکسان ترکیب کرد.
- یک تگ `<style>` می‌تواند دارای ویژگی‌های `scoped` یا `module` باشد (برای جزئیات بیشتر به [SFC Style Features](/api/sfc-css-features) مراجعه کنید) تا به کپسوله کردن استایلها در کامپوننت فعلی کمک کند. چندین تگ `<style>` با حالت‌های کپسوله‌سازی متفاوت را می‌توان در یک کامپوننت یکسان ترکیب کرد.

### بلوک های سفارشی {#custom-blocks}
### بلوکهای سفارشی {#custom-blocks}

بلوک‌های سفارشی اضافی را می‌توان در فایل &lrm;`*.vue` برای هر نیاز خاص در پروژه گنجاند، برای مثال بلوک `<docs>`. برخی از نمونه های دنیای واقعی از بلوک‌های سفارشی عبارتند از:

Expand All @@ -70,11 +70,11 @@ export default {

## پیش‌بینی خودکار نام {#automatic-name-inference}

یک SFC به طور خودکار نام مؤلفه را از **نام فایل** آن در موارد زیر پیش‌بینی می کند:
یک SFC به طور خودکار نام مؤلفه را از **نام فایل** آن در موارد زیر پیش‌بینی میکند:

- قالب بندی هشدار توسعه (Dev warning formatting)
- قالببندی هشدار توسعه (Dev warning formatting)
- بازرسی DevTools یا (DevTools inspection)
- ارجاع بازگشتی به خود، به عنوان مثال فایلی به نام `FooBar.vue` می‌تواند در تمپلیت خود به `<FooBar/>` اشاره کند. این اولویت کمتری نسبت به کامپوننت های صریحا ثبت‌شده/ایمپورت شده دارد.
- ارجاع بازگشتی به خود، به عنوان مثال فایلی به نام `FooBar.vue` می‌تواند در تمپلیت خود به `<FooBar/>` اشاره کند. این اولویت کمتری نسبت به کامپوننتهای صریحا ثبت‌شده/ایمپورت شده دارد.

## پیش پردازشگرها {#pre-processors}

Expand Down Expand Up @@ -109,7 +109,7 @@ p {{ msg }}

## ایمپورت‌های `src` {#src-imports}

اگر ترجیح می دهید کامپوننت‌های &lrm;`*.vue` خود را به چندین فایل تقسیم کنید، می‌توانید از ویژگی `src` برای ایمپورت کردن یک فایل خارجی برای یک بلوک زبان استفاده کنید:
اگر ترجیح میدهید کامپوننت‌های &lrm;`*.vue` خود را به چندین فایل تقسیم کنید، می‌توانید از ویژگی `src` برای ایمپورت کردن یک فایل خارجی برای یک بلوک زبان استفاده کنید:


```vue
Expand All @@ -121,21 +121,21 @@ p {{ msg }}
مراقب باشید که ایمپورت‌های `src` از قوانین وضوح مسیر، مشابه درخواست‌های ماژول webpack پیروی می‌کند، به این معنی که:

- مسیرهای نسبی باید با `/.` شروع شوند
- می توانید منابع را از وابستگی‌های npm ایمپورت کنید:
- میتوانید منابع را از وابستگی‌های npm ایمپورت کنید:

```vue
<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />
```

ایمپورت‌های `src` با بلوک های سفارشی نیز کار می کند، به عنوان مثال:
ایمپورت‌های `src` با بلوکهای سفارشی نیز کار میکند، به عنوان مثال:

```vue
<unit-test src="./unit-test.js">
</unit-test>
```

## کامنت ها {#comments}
## کامنتها {#comments}

در داخل هر بلوک باید از سینتکس کامنت گذاری زبان مورد استفاده (HTML، CSS، جاوا اسکریپت، Pug و غیره) پیروی کنید. برای کامنت گذاری سطح بالا، از سینتکس کامنت گذاری HTML استفاده کنید: `<!-- مطالب را در اینجا کامنت کنید -->`
در داخل هر بلوک باید از سینتکس کامنتگذاری زبان مورد استفاده (HTML، CSS، جاوا اسکریپت، Pug و غیره) پیروی کنید. برای کامنت گذاری سطح بالا، از سینتکس کامنت گذاری HTML استفاده کنید: `<!-- مطالب را در اینجا کامنت کنید -->`

0 comments on commit 271783b

Please sign in to comment.