Vielleicht ist das eine triviale Frage.
Wenn ich also meine vuejs-Anwendung im Browser ausführe, wird die Download-Geschwindigkeit gedrosselt (auf niedrige Verbindung eingestellt). Ich habe eine unvollendete Ausgabe der Vue-Syntax im Browser erhalten.
Ich weiß, wir können dies austricksen, indem wir das Laden des Bildes anzeigen, bevor die gesamte Seite geladen wurde, aber gibt es eine beste Lösung, um dies zu beheben?
Antworten:
Sie können die v-cloak- Direktive verwenden, mit der die Vue-Instanz ausgeblendet wird, bis die Kompilierung abgeschlossen ist.
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appsollte alles in Ordnung sein
v-cloak, als ob dies die Standardeinstellung sein sollte und wenn jemand das wirklich zeigen wollte, {{ }}sollte er so etwas wie verwenden v-uncloak.
display:noneauf vorhandenem HTML ist eine schlechte Flagge für SEO. Ich denke, es ist vielleicht besser, eine Art Overlay zu verwenden, bis die Seite geladen ist.
Ich habe den folgenden Codepen angehängt. Sie können den Unterschied mit und ohne sehen v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakAttribut.
Wie von anderen vorgeschlagen, ist die Verwendung von V-Cloak die richtige Lösung. Wie @ DelightedD0D erwähnt hat, ist es jedoch klobig. Eine einfache Lösung besteht darin, dem Pseudo-Selektor ::beforeder v-cloakDirektive etwas CSS hinzuzufügen .
In Ihrer sass / less-Datei etwas in der Art von
[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%;
}Natürlich müssen Sie einen gültigen und zugänglichen Pfad zum Loader-Image angeben. Es wird so etwas wie rendern.
Ich hoffe es hilft.
Mit der v-cloakDirektive können Sie nicht kompilierte Schnurrbartbindungen ausblenden, bis die Kompilierung der vue-Instanz abgeschlossen ist. Sie müssen den CSS-Block verwenden, um ihn bis zur Kompilierung auszublenden.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>CSS:
[v-cloak] {
display: none;
}Dies <div>ist erst sichtbar, wenn die Kompilierung abgeschlossen ist.
Sie können diesen Link sehen. Elemente während des Ladens ausblenden,v-cloak um das Verständnis zu verbessern.
Fügen Sie der HTML-Datei keine vuejs-Syntax hinzu:
<!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>In Ihrem Haupt-JavaScript können Sie:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})Weitere Informationen finden Sie in der vuetify-Webpack-Vorlage .
Eine andere Lösung ist zu verwenden:
<!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>Mit:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})Sie können jedes Rendering in eine einfache Wrapper- Komponente verschieben . Die VueJS-Initialisierung, z. B. new Vue (....), sollte außer dieser einzelnen Wrapper-Komponente kein HTML enthalten.
Abhängig vom Setup können Sie sogar festlegen, <app>Loading...</app>wo die App die Wrapper-Komponente ist, wobei HTML oder Text dazwischen geladen wird, der dann beim Laden ersetzt wird.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Verwenden <v-cloak>Sie diese Option, um Ihren Vue-Code auszublenden, bevor Sie Daten an relevante Stellen binden. Es befindet sich tatsächlich an einer Stelle in der Vue-Dokumentation, an der es möglicherweise jemandem entgeht, wenn Sie nicht danach suchen oder es gründlich lesen.
Ja, Sie können verwenden v-cloak, ich mag Spinkit verwenden , ist eine großartige Bibliothek mit nur CSS, überprüfen Sie ein einfaches Beispiel:
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>Link: - http://tobiasahlin.com/spinkit/
Ich bevorzuge die Verwendung v-ifmit einer berechneten Eigenschaft, die prüft, ob meine Daten bereit sind, wie folgt:
<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>Auf diese Weise ist es einfacher, einen Loader nur anzuzeigen, wenn die Daten nicht bereit sind (using v-else ).
In diesem speziellen Fall v-if="variableName"würde es auch funktionieren, aber es kann kompliziertere Szenarien geben.
Wenn Sie V-Cloak in einer Ansicht mit mehreren Laravel Blade-Dateien verwenden und dies nicht funktioniert, versuchen Sie, den V-Cloak für die übergeordnete Blade-Datei und nicht für eine untergeordnete Blade-Datei zu verwenden.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>es bedeutet, ich solltev-cloakjedem Element , das ich verbergen möchte, ein Attribut hinzufügen ?