Resumo de uma frase
HTML: elemento mais v-cloak
CSS: [v-cloak]{display: nenhum}processo
A sintaxe do Beard será exibida quando a página for carregada pela primeira vez.
v-cloak é um método simples e importante para melhorar a experiência do usuário em pequenos projetos VueJS.
uso
Em HTML, adicione v-cloak às tags necessárias para organizar o flash
<div id="aplicativo">
<nav>blabla</nav>
<main v-cloak>{{text}}</main>
</div>Defina o estilo para v-cloak em CSS. Este estilo só é aplicado [antes da compilação da instância vue].
[v-capa]{
exibição: nenhum;
}princípio
Ainda não terminei de ler o código-fonte, mas entendo aproximadamente o princípio do v-cloak :
O primeiro é o seletor CSS. Usar [target] seleciona "todos os elementos com o atributo target". Você pode revisar os seletores aqui.
Então [v-cloak] seleciona todos os elementos com o atributo v-cloak .
Após a conclusão da inicialização da instância, o VueJS removerá os atributos exclusivos do Vue. Antes de a inicialização da instância ser concluída, o código HTML principal escrito acima se parece com isto:
<main id="main" class="row" v-cloak="">
Em seguida, adicione CSS para display: block todos os elementos com v-cloak.
Na verdade, não é apenas v-cloak. Você pode tentar com v-if. Use [v-if]{display:none} em CSS e o efeito será o mesmo. Assim como v-cloak , v-if também é removido após a compilação da instância.
Código fonte
Aí acabei de ler o código fonte, que é sobre este parágrafo. Pessoas interessadas podem pesquisar e ler para entender.
if (isRealElement) {
//montando em um elemento real
// verifica se este é conteúdo renderizado pelo servidor e se podemos executar
// uma hidratação bem-sucedida.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
hidratante = verdadeiro;
}
}Isso conclui este artigo sobre como evitar o efeito de tela piscante do Vue em projetos pequenos. Para obter mais conteúdo relacionado às telas piscantes do Vue em projetos pequenos, pesquise os artigos anteriores em downcodes.com ou continue navegando nos seguintes artigos relacionados. apoie downcodes.com mais no futuro!