[javascript] 페이지가로드되는 동안 VueJS 구문을 숨기려면 어떻게합니까?

아마도 이것은 사소한 질문 일 것입니다.

따라서 브라우저에서 vuejs 응용 프로그램을 실행하면 다운로드 속도를 조절할 수 있습니다 (연결 속도가 느림). 브라우저에서 미완성 된 vue 구문 출력을 얻었습니다.

전체 페이지가로드되기 전에 이미지로드 를 표시 하여이 문제를 해결할 수는 있지만이 문제를 해결하는 가장 좋은 해결책이 있습니까?

답변

v-cloak 지시문을 사용 하면 컴파일이 완료 될 때까지 Vue 인스턴스를 숨길 수 있습니다 .

HTML :

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

CSS :

[v-cloak] { display: none; }

답변

다음 코드 펜을 첨부했습니다. 의 유무에 관계없이 차이점을 볼 수 있습니다 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

답변

다른 사람들이 제안한 것처럼 v-cloak을 사용하는 것이 적절한 솔루션입니다. 그러나 @ DelightedD0D는 언급했듯이 성가시다. 간단한 해결책은 의사 지시자 의 의사 선택기 ::before에 CSS를 추가하는 것 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 하여이 요소를로드하는 동안 요소 숨기기 링크를 볼 수 있습니다 .

답변

HTML 파일에 vuejs 구문을 포함시키지 마십시오 :

<!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 이로드 HTML 또는 텍스트 사이에있는 래퍼 구성 요소 인 <app>Loading...</app>위치 를 가질 수도 있습니다 .

답변

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

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