Как скрыть синтаксис VueJS во время загрузки страницы?

может быть, это банальный вопрос.

Итак, когда я запускаю приложение vuejs в браузере с возможностью регулирования скорости загрузки (устанавливает низкое соединение). Я получил незавершенный синтаксис Vue вывод в браузере.

Я знаю, что мы можем обмануть это с показом загрузка изображения перед загрузкой всей страницы, но есть ли лучшее решение для исправления этого?

10 89
javascript vue.js

10 ответов:

можно использовать в-плащ директива, которая будет скрывать экземпляр Vue до завершения компиляции.

HTML:

<div v-cloak>{{ message }}</div>

CSS:

[v-cloak] { display: none; }
144

я прикрепил следующий codepen. Вы можете увидеть разницу с и без v-cloak.

<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>

http://codepen.io/gurghet/pen/PNLQwy

35

как было предложено другими с помощью в-плащ - это правильное решение. Однако, как отметил @ DelightedD0D, это неуклюже. Простое решение-добавить CSS в псевдо-селектор ::before of

17

используя вы можете скрыть некомпилированные привязки усов, пока экземпляр vue не будет скомпилирован. Вы должны использовать блок CSS, чтобы скрыть его до компиляции.

HTML:

<div v-cloak>
  {{ vueVariable }}
</div>

CSS:

[v-cloak] {
  display: none;
}

этой <div> не будет видно, пока компиляция не будет завершена.

вы можете увидеть эту ссылку скрыть элементы во время загрузки с помощью v-cloak для лучшего понимания.

5

вы можете переместить любой рендеринг в простой фантиккомпонент. Инициализация VueJS например новое Vue(....) не должно содержать никакого HTML, кроме этого одного компонента оболочки.

в зависимости от настройки вы можете даже иметь <app>Loading...</app> здесь app является компонентом-оболочкой с любой загрузкой HTML или текста между ними, который затем заменяется при загрузке.

2

использовать <v-cloak> чтобы скрыть код Vue перед привязкой данных к соответствующим местам. Он фактически расположен в месте на документации Vue, что любой может пропустить его, если вы не будете искать его или внимательно читать.

1
**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }
1

не включайте синтаксис 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 webpack шаблон для справки.

другое решение заключается в использовании:

<!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")
})
1

Да, вы можете использовать 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/

0

для тех, кто использует v-cloak в представлении с несколькими файлами Laravel Blade, и он не работает, попробуйте использовать v-cloak в Родительском файле blade, а не в любом дочернем файле blade.

-1