Jak ukryć składnię VueJS podczas ładowania strony?

156

może to trywialne pytanie.

tak więc, kiedy uruchamiam moją aplikację vuejs w przeglądarce z włączoną funkcją ograniczania prędkości pobierania (ustawia niskie połączenie). Mam niedokończone dane wyjściowe składni vue w przeglądarce.

W przeglądarce pojawi się składnia Vue js

Wiem, że możemy to oszukać, wyświetlając obraz ładowania przed załadowaniem całej strony, ale czy istnieje najlepsze rozwiązanie, aby to naprawić?

javascript vue.js antoniputra
źródło

Odpowiedzi:

239

Możesz użyć dyrektywy v-cloak , która ukryje instancję Vue do czasu zakończenia kompilacji.

HTML:

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

CSS:

[v-cloak] { display: none; }
Gus
źródło
w api mówi: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> to znaczy, powinienem dodać v-cloakatrybut w każdym elemencie, który chciałbym ukryć?
antoniputra
22
Tylko do głównego Appdiv powinno być w porządku
Jeff
3
To działa, ale stary jest niezgrabny. Naprawdę liczyłem na coś bardziej eleganckiego. Jednak +1
Wesley Smith
27
Wygląda na to, że v-cloakpowinno to być domyślne i jeśli ktoś naprawdę chciałby to pokazać {{ }}, powinien użyć czegoś takiego v-uncloak.
nu everest
3
display:nonew istniejącym kodzie HTML jest złą flagą dla SEO. Myślę, że lepiej byłoby użyć jakiejś nakładki do załadowania strony.
T.Todua
41

Załączam następujący kod. Możesz zobaczyć różnicę zi bez 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
źródło
1
tak, rozumiem ... dzięki, twój kod będzie pomocny dla nowo przybyłych.
antoniputra
nadal otrzymujesz pierwszy {{test}}, podczas gdy vuejs się ładuje, więc nie jest to idealna odpowiedź
twigg
12
@twigg O to chodzi. Pierwsza z nich pokazuje zwykły tag, a druga pokazuje zakryta etykietę przy użyciu v-cloakatrybutu.
kb.
29

Jak sugerują inni, użycie v-cloak jest właściwym rozwiązaniem. Jednak, jak wspomniał @ DelightedD0D, jest niezgrabny. Prostym rozwiązaniem jest dodanie trochę CSS selektor pseudo ::beforez v-cloakdyrektywą.

W twoim pliku sass / less coś w stylu 

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

Oczywiście musisz podać prawidłową i dostępną ścieżkę do obrazu programu ładującego. Wyrenderuje coś podobnego.

wprowadź opis obrazu tutaj

Mam nadzieję, że to pomoże.

schartz
źródło
7

Za pomocą v-cloakdyrektywy możesz ukryć nieskompilowane powiązania wąsów do czasu zakończenia kompilacji instancji vue. Musisz użyć bloku CSS, aby ukryć go do czasu skompilowania.

HTML: 

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

CSS:

[v-cloak] {
  display: none;
}

Nie <div>będzie to widoczne, dopóki kompilacja nie zostanie zakończona.

Możesz zobaczyć ten link Ukryj elementy podczas wczytywania za pomocą,v-cloak aby lepiej zrozumieć.

Summonjoy
źródło
5

Nie umieszczaj w pliku HTML żadnej składni vuejs:

<!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>

W swoim głównym JavaScript możesz:

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

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

Zobacz szablon vuetify webpack w celach informacyjnych.

Innym rozwiązaniem jest użycie:

<!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>

Z:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);

const app = new Vue({});

window.addEventListener("load", async () => {    
  app.$mount("#app")
})
ysdx
źródło
3

Możesz przenieść dowolny rendering do prostego komponentu opakowania . Inicjalizacja VueJS, np. Nowy Vue (....), nie powinna zawierać żadnego HTML-a poza tym pojedynczym komponentem opakowującym.

W zależności od konfiguracji możesz nawet mieć miejsce, w <app>Loading...</app>którym aplikacja jest komponentem opakowania z dowolnym ładującym się kodem HTML lub tekstem, który jest następnie zastępowany podczas ładowania.

Korytarz
źródło
3 
**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }
gotocartik
źródło
2

Służy <v-cloak>do ukrywania kodu Vue przed powiązaniem danych z odpowiednimi miejscami. W rzeczywistości znajduje się w miejscu w dokumentacji Vue, którego każdy może przegapić, chyba że go poszukasz lub dokładnie przeczytasz.

dakshinasd
źródło
2

Tak, możesz użyć v-cloak, ja lubię używać spinkit , to świetna biblioteka z samym CSS, sprawdź prosty przykład:

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>
Rozwiń fragment

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

fitorec
źródło
1

Wolę używać v-ifz obliczoną właściwością, która sprawdza, czy moje dane są gotowe, na przykład:

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

W ten sposób łatwiej jest pokazać program ładujący tylko wtedy, gdy dane nie są gotowe (używane v-else).

W tym konkretnym przypadku również v-if="variableName"by się sprawdził, ale mogą istnieć bardziej skomplikowane scenariusze.

Giorgio Tempesta
źródło
0

Dla tych, którzy używają v-cloak w widoku z wieloma plikami Laravel Blade, a to nie działa, spróbuj użyć v-cloak na nadrzędnym pliku blade zamiast w jakimkolwiek podrzędnym pliku blade.

user8581607
źródło