web-dev-qa-db-fra.com

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

c'est peut-être une question triviale.

ainsi, lorsque j'exécute mon application vuejs sur un navigateur, la vitesse de téléchargement est réduite (la connexion est faible). J'ai obtenu la sortie de syntaxe de vue inachevée dans le navigateur.

 Vue js syntax appear in browser

Je sais que nous pouvons résoudre ce problème en affichant loading image avant que la page entière ne soit chargée, mais existe-t-il une meilleure solution pour résoudre ce problème?

javascriptvue.js
94
antoniputra

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

HTML:

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

CSS:

[v-cloak] { display: none; }
157
Gus

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

37
gurghet

Comme suggéré par d’autres, utiliser v-cloak est la solution appropriée. Cependant, comme @ DelightedD0D l’a mentionné IS, maladroit. La solution simple consiste à ajouter des CSS dans le pseudo sélecteur ::before de la directive v-cloak.

Dans ton sass/less, écris quelque chose comme 

[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 d'accès valide et accessible à l'image du chargeur. Cela rendra quelque chose comme.

 enter image description here

J'espère que ça aide.

22
schartz

En utilisant la directive v-cloak, vous pouvez masquer les liaisons moustache non compilées jusqu'à ce que l'instance de vue soit complété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;
}

Ce <div> ne sera visible qu'une fois la compilation terminée.

Vous pouvez voir ce lien Masquer les éléments pendant le chargement en utilisant v-cloak pour une meilleure compréhension.

6
Summonjoy

N'incluez aucune syntaxe de 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 code JavaScript principal, vous pouvez:

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

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

Voir le modèle vuetify webpack 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")
})
3
ysdx

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

En fonction de la configuration, vous pourriez même avoir <app>Loading...</app> où app est le composant encapsuleur avec tout code HTML ou texte de chargement entre lesquels est ensuite remplacé lors du chargement.

3
A. Hall
**html**
<div v-cloak>{{ message }}</div>

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

Utilisez <v-cloak> pour masquer votre code Vue avant de lier des données à des emplacements appropriés. En fait, il est situé dans un endroit de la documentation de Vue où tout le monde pourrait le manquer, à moins que vous ne le recherchiez ou que vous le lisiez à fond. 

2
dakshinasd

Oui, vous pouvez utiliser v-cloak, j'aime bien utiliser spinkit, c'est une super bibliothèque avec seulement CSS, regardez 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>

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

1
fitorec

Je préfère utiliser v-if avec 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 (en utilisant v-else).

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

0
Giorgio Tempesta

Pour ceux qui utilisent v-cloak dans une vue contenant plusieurs fichiers de lames Laravel et que cela ne fonctionne pas, essayez d'utiliser v-cloak sur le fichier de lame parent plutôt que dans un fichier de lame enfant.

0
user8581607