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.
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ć?
Odpowiedzi:
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; }Appdiv powinno być w porządku
v-cloakpowinno to być domyślne i jeśli ktoś naprawdę chciałby to pokazać {{ }}, powinien użyć czegoś takiego v-uncloak.
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.
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>v-cloakatrybutu.
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.
Mam nadzieję, że to pomoże.
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ć.
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")
})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.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }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.
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>Link: - http://tobiasahlin.com/spinkit/
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.
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.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>to znaczy, powinienem dodaćv-cloakatrybut w każdym elemencie, który chciałbym ukryć?