สรุปประโยคเดียว.
HTML: องค์ประกอบบวก v-cloak
CSS: [v-cloak]{จอแสดงผล: ไม่มี}กระบวนการ
ไวยากรณ์ของ Beard จะปรากฏขึ้นเมื่อโหลดหน้าเว็บครั้งแรก
v-cloak เป็นวิธีการที่ง่ายและสำคัญในการปรับปรุงประสบการณ์ผู้ใช้ในโครงการ VueJS ขนาดเล็ก
การใช้งาน
ใน HTML ให้เพิ่ม v-cloak ลงในแท็กที่คุณต้องการเพื่อจัดระเบียบการกะพริบ
<div id="แอป">
<nav>บลาบลา</nav>
<main v-cloak>{{text}}</main>
</div>ตั้งค่าสไตล์สำหรับ v-cloak ใน CSS สไตล์นี้จะถูกนำไปใช้เท่านั้น [ก่อนที่จะคอมไพล์อินสแตนซ์ vue]
[วี-เสื้อคลุม]{
จอแสดงผล: ไม่มี;
-หลักการ
ฉันยังอ่านซอร์สโค้ดไม่จบ แต่ฉันเข้าใจหลักการของ v-cloak อย่างคร่าวๆ :
อย่างแรกคือตัวเลือก CSS การใช้ [เป้าหมาย] เลือก "องค์ประกอบทั้งหมดที่มีแอตทริบิวต์เป้าหมาย" คุณสามารถตรวจสอบตัวเลือกได้ที่นี่
จากนั้น [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 จะถูกลบออกหลังจากคอมไพล์อินสแตนซ์แล้ว
ซอร์สโค้ด
จากนั้นผมก็แค่อ่าน Source Code ซึ่งน่าจะเป็นย่อหน้านี้ ผู้ที่สนใจสามารถค้นหาและอ่านทำความเข้าใจได้
ถ้า (isRealElement) {
// ติดตั้งเข้ากับองค์ประกอบจริง
// ตรวจสอบว่านี่เป็นเนื้อหาที่แสดงผลโดยเซิร์ฟเวอร์หรือไม่และเราสามารถทำได้หรือไม่
// การให้น้ำที่ประสบความสำเร็จ
ถ้า (oldVnode.nodeType === 1 && oldVnode.hasAttribute (SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
การให้ความชุ่มชื้น = จริง;
-
-นี่เป็นการสรุปบทความนี้เกี่ยวกับวิธีป้องกันเอฟเฟกต์หน้าจอกะพริบของ Vue ในโปรเจ็กต์ขนาดเล็ก สำหรับเนื้อหาที่เกี่ยวข้องเพิ่มเติมบนหน้าจอกะพริบของ Vue ในโปรเจ็กต์ขนาดเล็ก โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องต่อไปนี้ต่อไป สนับสนุน downcodes.com มากขึ้นในอนาคต!