Como oculto a sintaxe do VueJS enquanto a página está carregando?

155

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?

javascript vue.js antoniputra
fonte

238

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; }

Gus
fonte

in api diz: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> significa, devo adicionar v-cloakatributo em todo elemento que eu desejo ocultar?

antoniputra

22

Só para o principal Appdiv deve ser fino

Jeff

3

Isso funciona, mas cara, é desajeitado. Eu realmente esperava algo mais elegante. 1 embora

Wesley Smith

27

Parece que v-cloakdeve ser o padrão e que, se alguém realmente quiser mostrar {{ }}, deve usar algo como v-uncloak.

nu everest

3

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.

T.Todua

41

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>

http://codepen.io/gurghet/pen/PNLQwy

gurghet
fonte

1

Sim, entendi ... obrigado, seu codepen seria de ajuda para os recém-chegados.

Antoniputra

você ainda receber o primeiro teste {{}} enquanto vuejs é o carregamento por isso não é uma resposta perfeita

Twigg

12

@twigg Esse é o ponto. O primeiro mostra marca regular e o segundo mostra marca camuflada usando o v-cloakatributo

kb.

29

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.

schartz
fonte

7

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.

Summonjoy
fonte

5

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")
})

ysdx
fonte

3

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.

Um corredor
fonte

3

**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }

gotocartik
fonte

2

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.

dakshinasd
fonte

2

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>

Expandir snippet

Link: - http://tobiasahlin.com/spinkit/

fitorec
fonte

1

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.

Giorgio Tempesta
fonte

0

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.

user8581607
fonte

Como oculto a sintaxe do VueJS enquanto a página está carregando?

Respostas: