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.
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?
Réponses:
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; }Appdiv principal devrait être bien
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.
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.
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>v-cloakattribut.
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.
J'espère que ça aide.
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.
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")
})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.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }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.
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>Lien: - http://tobiasahlin.com/spinkit/
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.
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.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>cela signifie, je devrais ajouter unv-cloakattribut dans chaque élément que je souhaite cacher?