Comment masquer la syntaxe VueJS pendant le chargement de la page?
Peut-être que c'est une question triviale.
Donc, quand je lance mon application vuejs sur le navigateur avec active la vitesse de téléchargement de limitation (définit la connexion faible). J'ai obtenu une sortie de syntaxe vue inachevée dans le navigateur.
Je sais que nous pouvons tromper cela en montrant chargement de l'image avant que la page entière ne soit chargée, mais y a-t-il une meilleure solution pour résoudre ce problème?
10 réponses
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>
Comme suggéré par d'autres en utilisant V-cloak est une solution appropriée. Cependant, comme @ DelightedD0D l'a mentionné, C'est maladroit. La solution Simple consiste à ajouter du CSS dans le pseudo sélecteur ::before de la directive v-cloak.
Dans votre fichier sass/less quelque chose du type
[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. Il rendra quelque chose comme.
J'espère que ça aide.
En utilisant la directive v-cloak, Vous pouvez masquer les liaisons moustache Non compilées jusqu'à ce que l'instance vue ait terminé la compilation. 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 pas visible tant que la compilation n'est pas terminée.
Vous pouvez voir ce lien Masquer les éléments lors du chargement en utilisant v-cloak pour une meilleure sous-estimation.
Vous pouvez déplacer n'importe quel rendu vers un simple wrapper composant . L'initialisation VueJS par exemple new Vue(....) ne devrait pas contenir de HTML en dehors de ce composant wrapper unique.
Selon la configuration, vous pouvez même avoir <app>Loading...</app> où app est le composant wrapper avec N'importe quel HTML ou texte de chargement entre lequel est ensuite remplacé lors du chargement.
Utilisez <v-cloak> pour masquer votre code Vue avant de lier les données aux endroits pertinents. Il est en fait situé dans un endroit sur la documentation Vue que n'importe qui pourrait le manquer à moins que vous le recherchiez ou que vous le lisiez à fond.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
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/>'
})
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")
})
Oui, vous pouvez utiliser v-cloak, j'aime utiliser spinkit, est une grande bibliothèque avec uniquement du CSS, consultez 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/
Pour ceux qui utilisent v-cloak dans une vue avec plusieurs fichiers Laravel Blade et que cela ne fonctionne pas, essayez d'utiliser v-cloak sur le fichier Blade parent plutôt que dans n'importe quel fichier Blade enfant.