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

156

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

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

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

javascript vue.js antoniputra
источник

240

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

HTML:

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

CSS:

[v-cloak] { display: none; }

Гас
источник

в API говорит: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> это значит, я должен добавить v-cloakатрибут в каждый элемент, который я хочу скрыть?

антонипутра

23

Просто с основным Appдивом все должно быть в порядке

Джефф

3

Это работает, но человек это неуклюжий. Я действительно надеялся на что-то более элегантное. +1, хотя

Уэсли Смит

28

Похоже, v-cloakдолжно быть по умолчанию, и если кто-то действительно хотел показать, {{ }}они должны использовать что-то вроде v-uncloak.

Ню Эверест

3

display:noneна существующем HTML, это плохой флаг для SEO. Я думаю, что может быть лучше использовать какое-то наложение до загрузки страницы.

Т.Тодуа

41

Я прикрепил следующий кодекс. Вы можете увидеть разницу с и без 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

gurghet
источник

1

да, я понял ... спасибо, твой кодекс будет помогать новичкам.

антонипутра

вы все еще получаете первый {{test}} во время загрузки vuejs, так что это не идеальный ответ

twigg

12

@twigg В этом все дело. Первый показывает обычный тег, а второй показывает скрытый тег с использованием v-cloakатрибута.

кб.

29

Как полагают другие, использование 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%;
}

Конечно, вам нужно указать действительный и доступный путь к загрузчику изображения. Это сделает что-то вроде.

Надеюсь, поможет.

schartz
источник

7

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

HTML:

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

CSS:

[v-cloak] {
  display: none;
}

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

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

Summonjoy
источник

5

Не включайте синтаксис 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")
})

ysdx
источник

3

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

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

Зал
источник

3

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

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

gotocartik
источник

2

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

dakshinasd
источник

2

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

fitorec
источник

1

Я предпочитаю использовать 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"будет работать, но могут быть более сложные сценарии.

Джорджо Темпеста
источник

0

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

user8581607
источник

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

Ответы: