From 77c7fcdb07e6cbbf7847493f0ed50e4d073a4247 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Fri, 1 Dec 2023 09:59:48 +0100 Subject: [PATCH 1/2] update template-syntax --- src/guide/essentials/template-syntax.md | 145 +++++++++++------------- 1 file changed, 67 insertions(+), 78 deletions(-) diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md index 4d2a1f87..b3c41c1d 100644 --- a/src/guide/essentials/template-syntax.md +++ b/src/guide/essentials/template-syntax.md @@ -1,30 +1,28 @@ -# سینتکس قالب {#template-syntax} +# سینتکس تمپلیت {#template-syntax} -Vue از سینتکس قالب برپایه HTML استفاده میکند که این اجازه رو به شما میدهد تا DOM نمایش داده شده را به دیتای نمونه کامپوننت پایه متصل کند. -تمام قالبهای Vue از لحاظ سینتکس،HTML معتبر هستند که میتوانند توسط مرورگرهای با مشخصات سازگار و تحلیل کننده‌های HTML تحلیل شوند. +Vue از سینتکس تمپلیت که برپایه HTML گسترش یافته استفاده می‌کند، این اجازه رو به شما می‌دهد تا DOM نمایش داده شده را به دیتای موجود در کامپوننت متصل کنید. تمام تمپلیت‌های Vue از لحاظ سینتکس، HTML معتبر هستند که می‌توانند توسط مرورگرهای با مشخصات سازگار و تحلیل کننده‌های HTML تحلیل شوند. -در ماءواری ماجرا، Vue قالبها را به کد جاوا اسکریپت بسیار بهینه شده کامپایل میکند. همراه با سیستم واکنش پذیری، Vue میتواند بصورت هوشمندانه از حداقل تعداد کامپوننتهایی که باید مجددا رندر شوند و در هنگام تغییر وضعیت برنامه، حداقل دستکاری‌های DOM را اعمال کند. +در زیر کاپوت، Vue تمپلیت‌ها را به کد جاوا اسکریپت بسیار بهینه شده کامپایل می‌کند. همراه با سیستم reactivity، فریمورک Vue می‌تواند بصورت هوشمندانه حداقل تعداد کامپوننت‌هایی که باید مجددا رندر شوند را پیدا کند و در هنگام تغییر state برنامه، حداقل دستکاری‌های DOM را اعمال کند. -اگر با کلیت Virtual DOM آشنا هستید و قدرت خالص جاوااسکریپت را ترجیح می‌دهید، شما همچنین می‌توانید [مستقیما توابع مربوط به تحلیل را](/guide/extras/render-function) بجای قالبها، با پشتیبانی اختیاری از JSX بنویسید. +اگر با کلیت Virtual DOM آشنا هستید و قدرت خام جاوااسکریپت را ترجیح می‌دهید، شما همچنین می‌توانید [مستقیما از Render Functions](/guide/extras/render-function) بجای تمپلیت‌ها، با پشتیبانی اختیاری از JSX بنویسید. ## درج متن {#text-interpolation} -پایه‌ای ترین شکل بایند داده درج متن با سینتکس سیبیل (دو آکولاد) میباشد: +پایه‌ای ترین شکل data binding (اتصال داده) درج متن با سینتکس Mustache (دو آکولاد) می‌باشد: ```vue-html پیام: {{ msg }} ``` -تگ سیبیل با مقدار `msg`، [پراپرتی از شی کامپوننت مربوطه] (/guide/essentials/reactivity-fundamentals#declaring-reactive-state) جایگزین خواهد شد. همچنین این مقدار با هر تغییر در پراپرتی `msg` بروزرسانی خواهد شد. - +قسمت آکولاد دوتایی با مقدار درون `msg`، [پراپرتی از نمونه ساخته شده از کامپوننت مربوطه](/guide/essentials/reactivity-fundamentals#declaring-reactive-state) جایگزین خواهد شد. همچنین این مقدار با هر تغییر در پراپرتی `msg` بروزرسانی خواهد شد. ## HTML خام {#raw-html} آکولاد دوتایی داده را به عنوان متن ساده تفسیر میکند. برای خروجی HTML واقعی باید از [دایرکتیو `v-html`](/api/built-in-directives#v-html) استفاده کنید. ```vue-html -

استفاده از درون‌یابی متن: {{ rawHtml }}

-

استفاده از دایرکتیو v-html:

+

استفاده از حالت عادی درج متن : {{ rawHtml }}

+

v-html استفاده از دایرکتیو :

```
-

استفاده از درون‌یابی متن: {{ rawHtml }}

-

استفاده از دایرکتیو v-html:

+

استفاده از حالت عادی درج متن : {{ rawHtml }}

+

استفاده از دایرکتیو v-html :

-اینجا با چیزی جدید مواجه شده ایم. اتریبیوت `v-html` همانطور که می‌بینید **دایرکتیو** نام گذاری شده است. دایرکتیوها پیشوند `v-` دارند تا نمایش دهنده این باشد که آنها اتریبیوت خاصی هستند که توسط Vue عرضه شده است و همانطور که ممکن است حدس زده باشید، آنها رفتار واکنشی ویژه ای را به DOM رندر شده اعمال می کنند. اینجاست که ما اساسا می‌گوییم "این عنصر داخلی HTML را با پراپرتی `rawHTML` بر شی فعال حال حاضر بروز رسانی نگهدارید. - -محتوای `span` با مقدار پراپرتی `rawHtml` جایگزین خواهد شد، که بعنوان HTML ساده تفسیر میشود. بایند دیتا در اینجا نادیده گرفته میشود. در نظر داشته باشید که شما نمیتوانید از `v-html` برای بایند بخشی از قالب استفاده کنید، زیرا که Vue یک موتور قالب‌بندی برپایه استرینگ نیست. در عوض، کامپوننت‌ها به عنوان واحدهای اساسی برای استفاده مجدد و بایند UI ارجحتر هستند. +در اینجا ما با چیز جدیدی روبرو شدیم. اتریبیوت `v-html` همانطور که می‌بینید **دایرکتیو** نام گذاری شده است. دایرکتیوها پیشوند `v-‎` دارند تا نمایش دهنده این باشد که آنها اتریبیوت خاصی هستند که توسط Vue عرضه شده‌اند و همانطور که ممکن است حدس زده باشید، آنها رفتار reactive ویژه ای را به DOM رندر شده اعمال می کنند. اینجاست که ما اساسا می‌گوییم "HTML داخلی این عنصر را با ویژگی `rawHtml` در نمونه فعال فعلی به روز نگه دارید." +محتوای `span` با مقدار پراپرتی `rawHtml` جایگزین خواهد شد، که بعنوان HTML ساده تفسیر میشود. اتصال دیتا در اینجا نادیده گرفته می‌شود. در نظر داشته باشید که شما نمی‌توانید از `v-html` برای بایند بخشی از تمپلیت استفاده کنید، زیرا که Vue یک موتور قالب‌بندی برپایه استرینگ نیست. در عوض، کامپوننت‌ها به عنوان بخش‌های اساسی برای استفاده مجدد و اتصال UI ترجیح داده می شوند. :::warning هشدار امنیتی -رندر داینامیکی HTML دلخواه بر وبسایت شما میتواند بسیار خطرناک باشد زیرا که میتواند به آسانی منجر به ]آسیب پذیری XSS [ (https://en.wikipedia.org/wiki/Cross-site_scripting) شود. از `v-html` فقط بر مطالب مورد اعتماد استفاده کنید و **هرگز** بر محتوای ارائه شده توسط کاربر استفاده نکنید. +رندر دلخواه HTML به صورت پویا بر وبسایت شما می‌تواند بسیار خطرناک باشد زیرا که می‌تواند به آسانی منجر به [آسیب پذیری XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) شود. از `v-html` فقط بر مطالب مورد اعتماد استفاده کنید و **هرگز** برای محتوای ارائه شده توسط کاربر استفاده نکنید. ::: +## اتصال اتریبیوت | Attribute Bindings {#attribute-bindings} -## بایند اتریبیوت {#attribute-bindings} - -آکولادها نمیتوانند در اتریبیوت HTML استفاده شوند. در عوض یک [دایرکتیو `v-bind`](/api/built-in-directives#v-bind): +آکولادها نمی‌توانند در اتریبیوت HTML استفاده شوند. در عوض یک [دایرکتیو `v-bind`](/api/built-in-directives#v-bind): ```vue-html
``` -دایرکتیو `v-bind` به Vue دستور میدهد تا اتریبیوت `id` یک المنت را همگام با پراپرتی `dynamicId` کامپوننت نگهدارد. اگر مقدار مقید شده برابر با `null` یا `undefined` باشد، سپس اتریبیوت از المنت رندر شده حذف خواهد شد. +در اینجا دایرکتیو `v-bind` به Vue دستور می‌دهد تا اتریبیوت `id` المنت را برابر با پراپرتی `dynamicId` در کامپوننت نگهدارد. اگر مقدار مقید شده برابر با `null` یا `undefined` باشد، اتریبیوت از المنت رندر شده حذف خواهد شد. ### مختصر نویسی {#shorthand} -به این دلیل که `v-bind` استفاده خیلی رایجی دارد. درنتیجه یک قاعده دستوری اختصاصی مختصر نویسی دارد: +به این دلیل که `v-bind` استفاده خیلی رایجی دارد. یک قاعده دستوری اختصاصی مختصر نویسی دارد: ```vue-html
``` +اتریبیوت‌هایی که با `:` شروع می‌شوند ممکن است کمی نسب به HTML عادی متفاوت بنظر برسند، اما این درواقع یک کاراکتر صحیح برای نام‌های اتریبیوت است و تمام مرورگرهایی که از Vue پشتیبانی می‌کنند، می‌توانند آن را بدرستی پارس کنند. علاوه بر این، آنها در html رندر شده نهایی ظاهر نمی‌شوند. استفاده از این خلاصه نویسی اختیاری می‌باشد، اما زمانی که بعداً در مورد استفاده از آن بیشتر بدانید، احتمالاً از آن قدردانی خواهید کرد. -اتریبیوتهایی که با `:` شروع میشوند ممکن است یه مقدار نسب به HTML عادی متفاوت بنظر بیان، اما این درواقع یک کاراکتر صحیح برای نامهای اتریبیوت است و تمام مرورگرهایی که از Vue پشتیبانی میکنند، میتوانند آنرا بدرستی پارس کنند. علاوه بر این، آنها در علامت نهایی رندر شده ظاهر نمیشوند. قاعده دستوری اختصاصی اختیاری میباشد، اما شما بخوبی از آن قدردان خواهید شد وقتی که از کاربردهای آن بعدا بیشتر یاد بگیرید. - -> For the rest of the guide, we will be using the shorthand syntax in code examples, as that's the most common usage for Vue developers. +> برای بقیه راهنما، ما از دستور مختصر در مثال‌های کد استفاده خواهیم کرد، زیرا این رایج‌ترین روش استفاده برای توسعه‌دهندگان Vue است. ### اتریبیوت‌های بولین {#boolean-attributes} -[اتریبیوتهای بولین](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) اتریبیوتهایی هستند که میتواند true / false بودن مقادیر را با حضور آنها بر یک المنت نشان داد. برای مثال، [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) یکی رایج ترین اتریبیوتهای بولین استفاده شده میباشد. - +[اتریبیوت‌های بولین](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) اتریبیوتهایی هستند که می‌تواند true / false بودن مقادیر را با حضور آنها بر یک المنت نشان داد. برای مثال، [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) یکی رایج ترین اتریبیوت‌های بولین استفاده شده می‌باشد. -`v-bind` در این مورد مقداری متفاوت عمل میکند: +`v-bind` در این مورد مقداری متفاوت عمل می‌کند: ```vue-html ``` -اگر `isButtonDisabled` [یک مقدار ترو](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) داشته باشد شامل اتریبیوت `disabled` خواهد شد. آن همچنان شامل خواهد شد اگر مقدار یک رشته خالی است، حفظ سازگاری با `