belki bu önemsiz bir sorudur.
bu yüzden, vuejs uygulamamı tarayıcıda çalıştırdığımda indirme hızını azaltmayı etkinleştiriyor (düşük bağlantıya ayarlanıyor). Tarayıcıda bitmemiş vue sözdizimi çıktısı aldım.
Tüm sayfa yüklenmeden önce görüntüyü yükleyerek bunu kandırabileceğimizi biliyorum , ancak bunu düzeltmek için en iyi çözüm var mı?
Yanıtlar:
Doğru CSS ile birleştirirseniz, derleme bitene kadar Vue örneğini gizleyen v-cloak direktifini kullanabilirsiniz .
HTML:
<div v-cloak>{{ message }}</div>
CSS:
[v-cloak] { display: none; }
Appbölüm iyi olmalı
v-cloakvarsayılan olmalı ve biri gerçekten göstermek isterse, {{ }}böyle bir şey kullanmalı v-uncloak.
display:nonemevcut HTML'de, SEO için kötü bir bayraktır. Bence sayfa yüklenene kadar bir çeşit kaplama kullanmak daha iyi olabilir.
Aşağıdaki codepen'i ekledim. Farkı olsun ve olmasın görebilirsiniz v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
v-cloaközniteliği kullanan gizlenmiş etiketi gösterir .
Başkalarının önerdiği gibi v-cloak kullanmak uygun bir çözümdür. Ancak @ DelightedD0D'nin bahsettiği gibi, bu çok hantal. Basit bir çözüm sözde seçicisi bazı CSS eklemektir ::beforearasında v-cloaktalimatı.
Sass / less dosyanızda şu satırlar boyunca bir şey
[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%;
}
Elbette, yükleyici görüntüsü için geçerli ve erişilebilir bir yol sağlamanız gerekir. Gibi bir şey yapacak.
Umarım yardımcı olur.
Yönergeyi kullanarak v-cloak, derlenmemiş bıyık bağlamalarını vue örneği derlenene kadar gizleyebilirsiniz. CSS bloğunu derlenene kadar gizlemek için kullanmalısınız.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
Bu <div>, derleme tamamlanana kadar görünmeyecektir.
Daha iyi anlaşılması için yükleme sırasında öğeleri gizlev-cloak bağlantısını görebilirsiniz .
HTML dosyasına herhangi bir vuejs sözdizimi eklemeyin:
<!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>
Ana JavaScript'inizde şunları yapabilirsiniz:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Referans için vuetify web paketi şablonuna bakın .
Başka bir çözüm kullanmaktır:
<!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>
İle:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})
Herhangi bir görüntülemeyi basit bir sarmalayıcı bileşenine taşıyabilirsiniz . VueJS başlatma, örneğin yeni Vue (....) , bu tek sarmalayıcı bileşeninden başka herhangi bir HTML içermemelidir.
Kuruluma bağlı olarak, uygulamanın sarmalayıcı bileşeni olduğu ve aralarındaki herhangi bir yükleme HTML'si veya metni yüklerken değiştirilecek olan <app>Loading...</app>yere bile sahip olabilirsiniz .
<v-cloak>Verileri ilgili yerlere bağlamadan önce Vue kodunuzu gizlemek için kullanın . Aslında, Vue belgelerinde, siz onu aramadıkça veya iyice okumadıkça, herkesin gözden kaçırabileceği bir yerde bulunur.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
Evet, kullanabilirsiniz v-cloak, spinkit kullanmayı seviyorum , sadece CSS ile harika bir kitaplık, basit bir örneğe bakın:
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>Bağlantı: - http://tobiasahlin.com/spinkit/
v-ifVerilerimin hazır olup olmadığını kontrol eden hesaplanmış bir mülkle kullanmayı tercih ediyorum , örneğin:
<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>
Bu şekilde, bir yükleyiciyi yalnızca veriler hazır değilse (kullanılıyorsa v-else) göstermek daha kolaydır .
Bu özel durumda v-if="variableName"da işe yarayabilir, ancak daha karmaşık senaryolar olabilir.
Birden çok Laravel Blade dosyası içeren bir görünümde v-cloak kullananlar ve bu çalışmıyorlar, herhangi bir alt blade dosyası yerine ana blade dosyasında v-cloak'ı kullanmaya çalışın.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>bu,v-cloakgizlemek istediğim her öğeye öznitelik eklemem gerektiği anlamına mı geliyor?