resumen de una frase
HTML: elemento más capa v
CSS: [v-capa]{pantalla: ninguna}proceso
La sintaxis de Beard se mostrará cuando la página se cargue por primera vez.
v-cloak es un método simple e importante para mejorar la experiencia del usuario en pequeños proyectos de VueJS.
uso
En HTML, agregue v-cloak a las etiquetas que necesita para organizar el flasheo
<div id="aplicación">
<nav>blabla</nav>
<capa v principal>{{text}}</main>
</div>Establezca el estilo para v-cloak en CSS. Este estilo solo se aplica [antes de compilar la instancia de vue].
[v-capa]{
pantalla: ninguna;
}principio
No he terminado de leer el código fuente, pero entiendo aproximadamente el principio de v-cloak :
El primero es el selector de CSS. El uso de [objetivo] selecciona "todos los elementos con el atributo de destino". Puedes revisar los selectores aquí.
Luego [v-cloak] selecciona todos los elementos con el atributo v-cloak .
Una vez completada la inicialización de la instancia, VueJS eliminará los atributos exclusivos de Vue. Antes de que se complete la inicialización de la instancia, el código HTML principal escrito anteriormente se ve así:
<id principal="clase principal"="fila" v-cloak="">
Luego agregue CSS para display: block todos los elementos con v-cloak.
De hecho, no es solo v-cloak. Puedes probarlo con v-if. Usa [v-if]{display:none} en CSS y el efecto será el mismo. Al igual que v-cloak , v-if también se elimina después de compilar la instancia.
código fuente
Luego leí el código fuente, que trata sobre este párrafo. Las personas interesadas pueden buscar y leer para comprender.
si (isRealElement) {
// montaje en un elemento real
// comprobar si se trata de contenido renderizado por el servidor y si podemos realizarlo
// una hidratación exitosa.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
hidratante = verdadero;
}
}Con esto concluye este artículo sobre cómo prevenir el efecto de pantalla parpadeante de Vue en proyectos pequeños. Para obtener más contenido relacionado sobre pantallas parpadeantes de Vue en proyectos pequeños, busque artículos anteriores en downcodes.com o continúe explorando los siguientes artículos relacionados. ¡Soporte downcodes.com más en el futuro!