v-pre (v-pre)
می خواهیم «دستور v-pre ویو» را یاد بگیریم. «کامپایل (Compile)» یعنی تبدیل قالب به HTML نهایی. با v-pre می گوییم این بخش اصلاً کامپایل نشود و همان متن خام نمایش داده شود.
تعریف و کاربرد v-pre
v-pre کامپایل را برای همان عنصر و همه فرزندانش رد می کند. بنابراین، می توانیم کد خام Vue مثل {{ }} را مستقیم نشان دهیم. این برای مثال ها، مستندات، یا دیباگ مفید است.
نمونه کد دستور v-pre ویو
پاراگراف اول با v-pre کامپایل نمی شود؛ دومی می شود.
<img v-bind:src="imgUrl[imgIndex]">
<p v-pre>Img src: '{{ imgUrl[imgIndex] }}' <strong>(Not compiled)</strong></p>
<p>Img src: '{{ imgUrl[imgIndex] }}' <strong>(Compiled version)</strong></p>
<button v-on:click="changeImg">Change image</button>
کِی از v-pre استفاده کنیم؟
وقتی می خواهی سینتکس ویو را خام نشان دهی. همچنین وقتی فقط متن نمونه می خواهی. اما اگر می خواهی فقط یک بار رندر شود، از v-once کمک بگیر.
نکته: v-pre سرعت را بالا می برد چون مرحله کامپایل را حذف می کند.
هشدار: با v-pre بایندینگ ها عمل نمی کنند. انتظار خروجی پویا نداشته باش.
گام های عملی
- تصمیم بگیر کدام بخش باید خام نمایش داده شود.
- روی همان عنصر، ویژگی
v-preرا قرار بده. - اگر نیاز به رویداد داری، از v-on جداگانه استفاده کن.
جمع بندی سریع
v-preکامپایل را رد می کند.- فرزندان هم کامپایل نمی شوند.
- نمایش
{{ }}به صورت خام ممکن است. - برای یک بار رندر، سراغ
v-onceبرو.