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

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

Vue js syntax appear in browser

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

antoniputra

Ответов: 12

Ответы (12)

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

HTML:

{{ message }}

CSS:

[v-cloak] { display: none; }

По мнению других, правильным решением является использование v-cloak. Однако, как упомянул @ DelightedD0D, это неуклюже. Простое решение - добавить CSS в псевдоселектор :: before of 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%;
}

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

enter image description here

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

Да, вы можете использовать v-cloak, мне нравится использовать spinkit, отличная библиотека только с CSS, посмотрите простой пример:

var vm = null;
    setTimeout (function () {
    vm = новый Vue ({
         el: '#app',
        данные: {
          msg: 'Отлично, используя:',
          url: 'http://tobiasahlin.com/spinkit/'
         }
      });
     }, 3000);
# app .sk-rotating-plane,
[v-Cloak]> * {display: none}
тело{
фон: # 42b983;
цвет: # 35495e;
}
#app [v-cloak] .sk-rotating-plane {
дисплей: блок;
цвет фона: # 35495e;
}





Vue с c-cloak

{{msg}} {{url}}

Ссылка: - http://tobiasahlin.com/spinkit/

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

HTML:

{{ vueVariable }}

CSS:

[v-cloak] {
  display: none;
}

Этот

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

You can see this link Hide elements during loading using v-cloak for better understating.

Помещение всего в <шаблон> сработало для меня.

Контент скрывается до тех пор, пока не будет обработан Vue.


<шаблон> {{name.first}} {{name.last}}
/ * index.js * /
новый Vue ({
  el: '#app',
  данные: {
    имя: {первое: 'Давид', последнее: 'Давидович'}
  }
});

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

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

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

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

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

.
[regular]Hold it... {{test}}
[cloak]Hold it... {{test}}

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

Я предпочитаю использовать v-if с вычисляемым свойством, которое проверяет, готовы ли мои данные, например:

<шаблон>
    
{{имя_переменной}}
Сюда можно вставить загрузчик
<сценарий> экспорт по умолчанию { имя: 'Тест', данные() { возвращение { имя_переменной: ноль, }; }, computed () { shouldDisplay () { вернуть this.variableName! == null; } }, mount () { this.variableName = 'да'; }, };

Так проще показать загрузчик, только если данные не готовы (используя v-else).

В этом конкретном случае v-if = "variableName" также будет работать, но могут быть более сложные сценарии.

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

Не включайте синтаксис vuejs в HTML-файл:



  
    
    
    My Super app
  
  
    

В основном JavaScript вы можете:

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: ''
})

См. Для справки шаблон веб-пакета vuetify.

Другое решение - использовать:



  
    
    
    My Super app
  
  
    

С:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);

const app = new Vue({});

window.addEventListener("load", async () => {    
  app.$mount("#app")
})

2022 WebDevInsider