может быть, это тривиальный вопрос.
поэтому, когда я запускаю мое приложение 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 является правильным решением. Однако, как упомянул @ DelightedD0D, это неуклюже. Простое решение , чтобы добавить некоторые CSS в селекторе псевдо ::beforeиз v-cloakдирективы.
В вашем файле sass / less что-то вроде
[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, например, new Vue (....) не должна содержать никакого HTML, кроме этого единственного компонента-оболочки.
В зависимости от настроек вы можете даже указать, <app>Loading...</app>где app является компонентом-оберткой с любым загружаемым HTML или текстом, который затем заменяется при загрузке.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Используйте, <v-cloak>чтобы скрыть свой код Vue перед привязкой данных к соответствующим местам. Это на самом деле находится в месте документации Vue, что любой может пропустить его, если вы не будете искать его или читать полностью.
Да, вы можете использовать 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 в родительском файле blade, а не в любом дочернем файле blade.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>это значит, я должен добавитьv-cloakатрибут в каждый элемент, который я хочу скрыть?