forse questa è una domanda banale.
quindi, quando eseguo la mia applicazione vuejs sul browser con abilita la velocità di download del throttling (imposta su una connessione bassa). Ho ottenuto l'output della sintassi Vue incompiuta nel browser.
So che possiamo risolvere il problema mostrando il caricamento dell'immagine prima che l'intera pagina sia stata caricata, ma esiste una soluzione migliore per risolvere il problema?
Risposte:
Puoi usare la direttiva v-cloak , che nasconderà l'istanza di Vue fino al termine della compilazione.
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appdiv principale dovrebbe andare bene
v-cloakdovrebbe essere il valore predefinito e che se qualcuno volesse davvero mostrarlo {{ }}dovrebbe usare qualcosa del genere v-uncloak.
display:nonesull'HTML esistente, è una brutta bandiera per il SEO. Penso che potrebbe essere meglio usare un qualche tipo di overlay fino al caricamento della pagina.
Ho allegato il seguente codice. Puoi vedere la differenza con e senza v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakattributo.
Come suggerito da altri, l'uso di v-cloak è la soluzione corretta. Tuttavia, come menzionato da @ DelightedD0D, è goffo. La soluzione semplice è aggiungere alcuni CSS nello pseudo-selettore ::beforedella v-cloakdirettiva.
Nel tuo file sass / less qualcosa sulla falsariga di
[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%;
}Ovviamente dovresti fornire un percorso valido e accessibile all'immagine del caricatore. Renderà qualcosa di simile.
Spero che sia d'aiuto.
Usando la v-cloakdirettiva puoi nascondere i baffi non compilati fino a quando l'istanza di Vue non viene completata. È necessario utilizzare il blocco CSS per nasconderlo fino alla compilazione.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>CSS:
[v-cloak] {
display: none;
}Questo <div>non sarà visibile fino al completamento della compilazione.
Puoi vedere questo link Nascondi gli elementi durante il caricamento usandov-cloak per una migliore comprensione.
Non includere alcuna sintassi vuejs nel file 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>Nel tuo JavaScript principale, puoi:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})Vedere il modello di webpack vuetify per riferimento.
Un'altra soluzione è utilizzare:
<!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>Con:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})È possibile spostare qualsiasi rendering in un semplice componente wrapper . L'inizializzazione di VueJS, ad esempio il nuovo Vue (....) , non dovrebbe contenere alcun HTML a parte quel singolo componente wrapper.
A seconda della configurazione, potresti persino avere l' app<app>Loading...</app> dove è il componente wrapper con qualsiasi HTML o testo di caricamento tra i quali viene quindi sostituito al caricamento.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Utilizzare <v-cloak>per nascondere il codice Vue prima di associare i dati a luoghi pertinenti. In realtà si trova in un punto della documentazione di Vue che a qualcuno potrebbe mancare a meno che non lo si cerchi o si legga attentamente.
Sì, puoi usare v-cloak, mi piace usare spinkit , è una grande libreria con solo CSS, guarda un semplice esempio:
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/
Preferisco usare v-ifcon una proprietà calcolata che controlla se i miei dati sono pronti, in questo modo:
<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>In questo modo è più semplice mostrare un caricatore solo se i dati non sono pronti (usando v-else ).
In questo caso particolare v-if="variableName"funzionerebbe anche, ma possono esserci scenari più complicati.
Per coloro che utilizzano v-cloak in una vista con più file Laravel Blade e non funziona, provare a utilizzare il v-cloak sul file blade padre anziché in qualsiasi file blade figlio.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>vuol dire che dovrei aggiungerev-cloakattributo in ogni elemento che vorrei nascondere?