Wie verstecke ich die VueJS-Syntax, während die Seite geladen wird?

154

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?

javascript vue.js Antoniputra
quelle

237

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

Gus
quelle

in api sagt: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> es bedeutet, ich sollte v-cloakjedem Element , das ich verbergen möchte, ein Attribut hinzufügen ?

Antoniputra

22

Nur zum Hauptteil Appsollte alles in Ordnung sein

Jeff

3

Das funktioniert, aber Mann, es ist klobig. Ich hatte wirklich auf etwas Eleganteres gehofft. +1 obwohl

Wesley Smith

27

Scheint so v-cloak, als ob dies die Standardeinstellung sein sollte und wenn jemand das wirklich zeigen wollte, {{ }}sollte er so etwas wie verwenden v-uncloak.

Nu Everest

3

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.

T.Todua

41

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>

http://codepen.io/gurghet/pen/PNLQwy

gurghet
quelle

1

Ja, ich habe es verstanden ... danke, dein Codepen wäre eine Hilfe für die Neuankömmlinge.

Antoniputra

Sie erhalten immer noch den ersten {{test}}, während vuejs geladen wird, daher ist dies keine perfekte Antwort

Twigg

12

@ Twigg Das ist der Punkt. Das erste zeigt ein reguläres Tag und das zweite zeigt ein getarntes Tag mit dem v-cloakAttribut.

kb.

29

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.

schartz
quelle

7

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.

Summonjoy
quelle

5

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")
})

ysdx
quelle

3

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.

Eine Halle
quelle

3

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

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

gotocartik
quelle

2

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.

dakshinasd
quelle

2

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>

Erweitern Sie das Snippet

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

fitorec
quelle

1

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.

Giorgio Tempesta
quelle

0

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.

user8581607
quelle

Wie verstecke ich die VueJS-Syntax, während die Seite geladen wird?

Antworten: