talvez essa seja uma pergunta trivial.
por isso, quando executo meu aplicativo vuejs no navegador, permite a aceleração da velocidade de download (define como baixa conexão). Eu tenho saída de sintaxe inacabada vue no navegador.
Sei que podemos resolver isso mostrando a imagem de carregamento antes que a página inteira seja carregada, mas existe a melhor solução para corrigir isso?
Respostas:
Você pode usar a diretiva v-cloak , que ocultará a instância do Vue até a compilação terminar.
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appdiv deve ser fino
v-cloakdeve ser o padrão e que, se alguém realmente quiser mostrar {{ }}, deve usar algo como v-uncloak.
display:noneno HTML existente, é um sinalizador ruim para o SEO. Eu acho que pode ser melhor usar algum tipo de sobreposição até carregar a página.
Anexei o seguinte código de código. Você pode ver a diferença com e sem v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakatributo
Conforme sugerido por outras pessoas, o uso do v-cloak é a solução adequada. No entanto, como @ DelightedD0D mencionou, é desajeitado. A solução simples é adicionar um pouco de CSS no pseudo-seletor::before de v-cloakdiretiva.
No arquivo sass / less, algo como as linhas de
[v-cloak] > * { display:none; }
[v-cloak]::before {
content: " ";
display: block;
position: absolute;
width: 80px;
height: 80px;
background-image: url(/images/svg/loader.svg);
background-size: cover;
left: 50%;
top: 50%;
}Obviamente, você precisará fornecer um caminho válido e acessível para a imagem do carregador. Vai render algo parecido.
Espero que ajude.
Usando v-cloak diretiva, você pode ocultar as ligações de bigode não compiladas até que a instância do vue termine de compilar. Você deve usar o bloco CSS para ocultá-lo até compilar.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>CSS:
[v-cloak] {
display: none;
}este <div> não será visível até que a compilação seja concluída.
Você pode ver este link Ocultar elementos durante o carregamento usandov-cloak para entender melhor.
Não inclua nenhuma sintaxe vuejs no arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>No seu JavaScript principal, você pode:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})Consulte o modelo do vuetify webpack para referência.
Outra solução é usar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>Com:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})Você pode mover qualquer renderização para um componente simples do wrapper . A inicialização do VueJS, por exemplo, o novo Vue (....) não deve conter nenhum HTML além desse único componente do wrapper.
Dependendo da configuração, você pode até ter <app>Loading...</app>onde app é o componente do invólucro, com qualquer HTML ou texto carregado entre os quais é substituído no carregamento.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Use <v-cloak>para ocultar seu código do Vue antes de vincular dados a locais relevantes. Na verdade, ele está localizado em um local na documentação do Vue que qualquer pessoa pode sentir falta, a menos que você o procure ou leia atentamente.
Sim, você pode usar v-cloak, eu gosto de usar spinkit , é uma ótima biblioteca apenas com CSS, veja um exemplo simples:
var vm = null;
setTimeout(function() {
vm = new Vue({
el: '#app',
data: {
msg: 'Is great, using: ',
url: 'http://tobiasahlin.com/spinkit/'
}
});
}, 3000);#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
background: #42b983;
color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
display:block;
background-color: #35495e;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">
<div id="app" v-cloak>
<div class="sk-rotating-plane"></div>
<h1>Vue with c-cloak</h1>
<p>
{{ msg }}
<a :href='url'>{{ url }}</a>
<p>
</div>Link: - http://tobiasahlin.com/spinkit/
Prefiro usar v-ifcom uma propriedade computada que verifique se meus dados estão prontos, assim:
<template>
<div v-if="shouldDisplay">
{{ variableName }}
</div>
<div v-else>
Here you can insert a loader
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
variableName: null,
};
},
computed() {
shouldDisplay() {
return this.variableName !== null;
}
},
mounted() {
this.variableName = 'yes';
},
};
</script>Dessa maneira, é mais fácil mostrar um carregador apenas se os dados não estiverem prontos (usando v-else).
Nesse caso específico, v-if="variableName"também funcionaria, mas pode haver cenários mais complicados.
Para aqueles que usam o v-cloak em uma exibição com vários arquivos Laravel Blade e não está funcionando, tente usar o v-cloak no arquivo blade pai em vez de em qualquer arquivo blade filho.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>significa, devo adicionarv-cloakatributo em todo elemento que eu desejo ocultar?