ملخص جملة واحدة
HTML: العنصر بالإضافة إلى عباءة v
CSS: [v-cloak] {العرض: لا شيء}عملية
سيتم عرض صيغة اللحية عند تحميل الصفحة لأول مرة.
v-cloak هي طريقة بسيطة ومهمة لتحسين تجربة المستخدم في مشاريع VueJS الصغيرة.
الاستخدام
في HTML، أضف v-cloak إلى العلامات التي تحتاجها لتنظيم الوميض
<div معرف = "التطبيق">
<nav>بلابلا</nav>
<main v-cloak>{{text}}</main>
</div>قم بتعيين النمط لـ v-cloak في CSS، ويتم تطبيق هذا النمط فقط [قبل تجميع مثيل vue].
[الخامس-عباءة]{
العرض: لا شيء؛
}مبدأ
لم أنتهي من قراءة الكود المصدري، لكني أفهم تقريبًا مبدأ v-cloak :
الأول هو محدد CSS. يؤدي استخدام [target] إلى تحديد "جميع العناصر ذات السمة المستهدفة". يمكنك مراجعة المحددات هنا.
ثم يقوم [v-cloak] بتحديد جميع العناصر ذات السمة v-cloak .
بعد اكتمال تهيئة المثيل، سيقوم VueJS بإزالة السمات الفريدة لـ Vue. قبل اكتمال تهيئة المثيل، يبدو كود HTML الرئيسي المكتوب أعلاه كما يلي:
<main id = "main" class = "row" v-cloak = "">
ثم أضف CSS display: block جميع العناصر باستخدام v-cloak.
في الواقع، لا يقتصر الأمر على v-cloak فحسب، بل يمكنك تجربته باستخدام v-if. استخدم [v-if]{display:none} في CSS، وسيبدو التأثير كما هو. مثل v-cloak ، تتم إزالة v-if أيضًا بعد تجميع المثيل.
كود المصدر
ثم قرأت للتو الكود المصدري، والذي ربما يكون هذه الفقرة، ويمكن للمهتمين البحث والقراءة لفهمه.
إذا (isRealElement) {
// التركيب إلى عنصر حقيقي
// تحقق مما إذا كان هذا محتوى معروضًا بواسطة الخادم وما إذا كان بإمكاننا تنفيذه
// ترطيب ناجح.
إذا (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
ترطيب = صحيح؛
}
}وبهذا تنتهي هذه المقالة حول كيفية منع تأثير شاشة Vue الوامضة في المشاريع الصغيرة. لمزيد من المحتوى ذي الصلة على شاشة Vue الوامضة في المشاريع الصغيرة، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة التالية، من فضلكم دعم downcodes.com المزيد في المستقبل!