можливо, це тривіальне питання.
Так що, коли я запускаю свою програму vuejs у браузері з увімкненням швидкості завантаження (встановлює низьке з'єднання). Я отримав незавершений вихід синтаксису vue у браузері.
Я знаю, що ми можемо це обдурити, показуючи завантаження зображення до завантаження всієї сторінки, але чи є найкраще рішення, щоб це виправити?
Відповіді:
Ви можете використовувати директиву v-cloak , яка приховає екземпляр Vue, поки компіляція не закінчиться.
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appдіва має бути добре
v-cloakщо за замовчуванням повинно бути, і якщо хтось дійсно хотів показати, {{ }}він повинен використовувати щось подібне v-uncloak.
display:noneна існуючому HTML - це поганий прапор для SEO. Я думаю, що може бути краще використовувати якусь накладку до завантаження сторінки.
Я прикріпив наступний коден. Ви можете бачити різницю з і без v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakатрибут.
Як вважають інші, використання v-cloak є правильним рішенням. Однак, як згадував @ DelightD0D, це незграбно. Просте рішення , щоб додати деякі CSS в селекторі псевдо ::beforeз v-cloakдирективи.
У вашому sass / менше запишіть щось за рядком
[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%;
}Звичайно, вам потрібно буде надати дійсний та доступний шлях до зображення завантажувача. Це виведе щось подібне.
Сподіваюся, це допомагає.
Використовуючи v-cloakдирективу, ви можете приховати некомпільовані прив'язки вуса до тих пір, поки екземпляр Vue не буде виконано. Ви повинні використовувати блок CSS, щоб приховати його до компіляції.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>CSS:
[v-cloak] {
display: none;
}Це <div>не буде видно, поки компіляція не буде завершена.
Ви можете побачити це посилання Сховати елементи під час завантаження, використовуючиv-cloak для кращого заниження.
Не включайте синтаксис vuejs у файл 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>У головному JavaScript ви можете:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})Для ознайомлення дивіться шаблон веб-пакету Vuetify .
Іншим рішенням є використання:
<!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>З:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})Ви можете перемістити будь-яку візуалізацію до простого компонента обгортки . Ініціалізація VueJS, наприклад, новий Vue (....) не повинен містити жодного HTML, крім цього одного компонента обгортки.
Залежно від налаштування, ви навіть можете мати <app>Loading...</app>там, де додаток є компонентом обгортки з будь-яким завантажувальним HTML або текстом, між якими потім замінюється при завантаженні.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Так, ви можете використовувати v-cloak, мені подобається використовувати spinkit , це чудова бібліотека з лише CSS, перевірте простий приклад:
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>Посилання: - http://tobiasahlin.com/spinkit/
Я вважаю за краще використовувати v-ifз обчисленою властивістю, яка перевіряє, чи готові мої дані, наприклад:
<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>Таким чином простіше показати завантажувач, лише якщо дані не готові (використовуються v-else).
У цьому конкретному випадку також v-if="variableName"буде працювати, але можливі складніші сценарії.
Для тих, хто використовує v-cloak у поданні з декількома файлами Laravel Blade і він не працює, спробуйте використовувати v-cloak на батьківському файлі леза, а не в будь-якому дочірньому файлі леза.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>значить, я повинен додатиv-cloakатрибут у кожному елементі, який я хотів би приховати?