v-cloak (v-cloak)
دایرکتیو «v-cloak» محتوای خام را موقتاً پنهان می کند. «کامپایل (Compile)» یعنی تبدیل قالب به DOM نهایی. پس تا کامپایل تمام شود، کاربر براکت ها را نمی بیند. مثل پرده صحنه تئاتر که قبل از شروع، همه چیز را می پوشاند.
تعریف و کاربرد v-cloak
v-cloak روی المنت می نشیند و با CSS پنهانش می کنیم. سپس وقتی Vue سوار شد، پنهان بودن برداشته می شود. این روش بیشتر برای کدهای کامپایل شونده در مرورگر است، نه فایل های SFC.
مثال پایه: پنهان سازی محتوای خام
اینجا متن تا زمان سوارشدن Vue دیده نمی شود. مثل مخفی کردن جواب تا معلم برسد.
<template>
<div id="app" v-cloak>
{{ message }}
</div>
</template>
<style>
[v-cloak] {
display: none;
}
</style>
<script>
export default {
data() {
return {
message: 'Hello World!'
};
}
};
<\/script>
مثال 1: برجسته کردن فاز قبل از کامپایل
برای دیدن فاز پیش ازکامپایل، متن را موقتاً قرمز می کنیم. بنابراین تغییر حالت واضح تر می شود.
<template>
<main>
<h3>Vue v-cloak Example</h3>
<p>Refresh to observe pre-compilation.</p>
<div id="app" v-cloak>
{{ message }}
</div>
</main>
</template>
<style>
[v-cloak] {
color: red;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
<script>
export default {
data() {
return {
message: 'Hello World!'
};
}
};
<\/script>
مثال 2: تأخیر عمدی با setTimeout()
با setTimeout() مونت را دیرتر انجام می دهیم. پس اثر v-cloak واضح تر دیده می شود.
<template>
<section>
<h3>Delayed Mount</h3>
<div id="app" v-cloak>
{{ message }}
</div>
</section>
</template>
<style>
[v-cloak] {
opacity: 0.5;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
<script>
export default {
data() {
return {
message: 'Hello World!'
};
},
mounted() {
setTimeout(() => {
this.message = 'Mounted!';
}, 1000);
}
};
<\/script>
گام های عملی
- روی المنت، ویژگی
v-cloakبگذار. - در CSS، سلکتور
[v-cloak]را پنهان کن. - اپ Vue را بساز و سوار کن.
- پس از مونت، نمایش عادی می شود.
نکته: برای دیگر دستورات، صفحه دایرکتیوها را ببین. همچنین اتصال ویژگی را در v-bind تمرین کن. برای سئو داخلی، از عبارت دایرکتیو v-cloak نیز استفاده کن.
جمع بندی سریع
v-cloakفلیکر محتوا را می گیرد.- با CSS، حالت پنهان را تعیین کن.
- برای SFC معمولاً لازم نیست.
- با تأخیر، اثر را بهتر ببین.