페이지가로드되는 동안 VueJS 구문을 숨기려면 어떻게합니까?
답변:
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는 언급했듯이 성가시다. 간단한 해결책은 의사 지시자 의 의사 선택기 ::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")
}), 당신은 사용할 수 있습니다 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] { display: none; } <div v-cloak> {{ message }} </div>그것은v-cloakII가 숨기고 싶은 모든 요소 에 속성을 추가해야한다는 것을 의미 합니까?