Comment masquer la syntaxe VueJS pendant le chargement de la page?

156

c'est peut-être une question triviale.

Ainsi, lorsque j'exécute mon application vuejs sur un navigateur, active la vitesse de téléchargement de la limitation (définit une connexion faible). J'ai obtenu une sortie de syntaxe vue inachevée dans le navigateur.

La syntaxe de Vue js apparaît dans le navigateur

Je sais que nous pouvons résoudre ce problème en affichant l' image de chargement avant que la page entière ne soit chargée, mais y a-t-il la meilleure solution pour résoudre ce problème?

javascript vue.js Antoniputra
la source

Réponses:

240

Vous pouvez utiliser la directive v-cloak , qui masquera l'instance de Vue jusqu'à la fin de la compilation.

HTML:

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

CSS:

[v-cloak] { display: none; }
Gus
la source
dans api dit: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> cela signifie, je devrais ajouter un v-cloakattribut dans chaque élément que je souhaite cacher?
antoniputra
23
Juste pour le Appdiv principal devrait être bien
Jeff
3
Cela fonctionne mais mec c'est maladroit. J'espérais vraiment quelque chose de plus élégant. +1 cependant
Wesley Smith
28
On dirait que v-cloakdevrait être la valeur par défaut et que si quelqu'un voulait vraiment montrer le, {{ }}il devrait utiliser quelque chose comme v-uncloak.
nu everest
3
display:nonesur le HTML existant, est un mauvais indicateur pour le référencement. Je pense qu'il vaut peut-être mieux utiliser une sorte de superposition jusqu'à ce que la page se charge.
T.Todua
41

J'ai joint le codepen suivant. Vous pouvez voir la différence avec et sans 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
la source
1
ouais je l'ai ... merci, votre codepen aiderait les nouveaux arrivants.
antoniputra
vous obtenez toujours le premier {{test}} pendant le chargement de vuejs, donc ce n'est pas une réponse parfaite
twigg
12
@twigg C'est le point. Le premier montre une balise régulière et le second montre une balise masquée utilisant l' v-cloakattribut.
kb.
29

Comme suggéré par d'autres, l'utilisation de v-cloak est une solution appropriée. Cependant, comme @ DelightedD0D l'a mentionné, c'est maladroit. La solution simple est d'ajouter du CSS dans le pseudo sélecteur ::beforede v-cloakdirective.

Dans votre fichier sass / less, quelque chose du genre 

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

Bien sûr, vous devez fournir un chemin valide et accessible vers l'image du chargeur. Cela rendra quelque chose comme.

entrez la description de l'image ici

J'espère que ça aide.

Schartz
la source
7

En utilisant la v-cloakdirective, vous pouvez masquer les liaisons de moustache non compilées jusqu'à ce que l'instance vue soit terminée. Vous devez utiliser le bloc CSS pour le masquer jusqu'à ce qu'il soit compilé.

HTML: 

<div v-cloak>
  {{ vueVariable }}
</div>

CSS:

[v-cloak] {
  display: none;
}

Cela <div>ne sera pas visible tant que la compilation ne sera pas terminée.

Vous pouvez voir ce lien Masquer les éléments lors du chargement en utilisantv-cloak pour une meilleure compréhension.

Summonjoy
la source
5

N'incluez aucune syntaxe vuejs dans le fichier 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>

Dans votre JavaScript principal, vous pouvez:

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Consultez le modèle de Webpack vuetify pour référence.

Une autre solution consiste à utiliser:

<!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>

Avec:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);

const app = new Vue({});

window.addEventListener("load", async () => {    
  app.$mount("#app")
})
ysdx
la source
3

Vous pouvez déplacer n'importe quel rendu vers un simple composant wrapper . L'initialisation de VueJS, par exemple, new Vue (....) ne doit contenir aucun HTML en dehors de ce composant wrapper unique.

Selon la configuration, vous pourriez même avoir <app>Loading...</app>où app est le composant wrapper avec tout HTML de chargement ou texte entre les deux qui est ensuite remplacé lors du chargement.

Un hall
la source
3 
**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }
gotocartik
la source
2

Utilisez <v-cloak>pour masquer votre code Vue avant de lier les données à des endroits pertinents. Il est en fait situé à un endroit de la documentation Vue que n'importe qui pourrait le manquer à moins que vous ne le cherchiez ou que vous ne le lisiez attentivement.

Dakshinasd
la source
2

Oui, vous pouvez utiliser v-cloak, j'aime utiliser spinkit , c'est une excellente bibliothèque avec uniquement CSS, vérifiez un exemple simple:

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>
Développer l'extrait

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

fitorec
la source
1

Je préfère utiliser v-ifavec une propriété calculée qui vérifie si mes données sont prêtes, comme ceci:

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

De cette façon, il est plus facile d'afficher un chargeur uniquement si les données ne sont pas prêtes (utilisation v-else).

Dans ce cas particulier, v-if="variableName"cela fonctionnerait également, mais il peut y avoir des scénarios plus compliqués.

Giorgio Tempesta
la source
0

Pour ceux qui utilisent v-cloak dans une vue avec plusieurs fichiers Laravel Blade et que cela ne fonctionne pas, essayez d'utiliser le v-cloak sur le fichier lame parent plutôt que dans n'importe quel fichier lame enfant.

user8581607
la source