페이지가로드되는 동안 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>
In your main JavaScript, you can:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
See the vuetify webpack template for reference.
Another solution is to use:
<!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>
With:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})
You could move any rendering to a simple wrapper component. The VueJS initialisation e.g. new Vue(....) shouldn’t contain any HTML apart from that single wrapper component.
Depending on setup you could even have <app>Loading...</app> where app is the wrapper component with any loading HTML or text in between which is then replaced on load.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
Use <v-cloak> to hide your Vue code before binding data to relevant places. It's actually located in a place on Vue documentation that anyone might miss it unless you search for it or read thoroughly.
Yep, you can use v-cloak, I like use spinkit, is a great library with only CSS, check a simple example:
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>Link: - http://tobiasahlin.com/spinkit/
For those who use v-cloak in a view with multiple Laravel Blade files and it's not working, try to use the v-cloak on the parent blade file rather than in any child blade file.
I prefer using v-if with a computed property that checks if my data is ready, like this:
<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>
In this way it's easier to show a loader only if the data is not ready (using v-else).
In this particular case v-if="variableName" would work as well, but there can be more complicated scenarios.
'Programing' 카테고리의 다른 글
| xcodebuild는 스키마를 포함하지 않는다고 말합니다. (0) | 2020.07.15 |
|---|---|
| 코드 완료시 소리 경보 (0) | 2020.07.15 |
| 회사 이름은 어디에 설정합니까? (0) | 2020.07.15 |
| IBus 문제 해결-1.5.11 이전의 IBus는 입력 문제를 일으킬 수 있습니다 (0) | 2020.07.15 |
| MySQL에서 열 값 교환 (0) | 2020.07.15 |