페이지를 로드하는 동안 VueJS 구문을 숨기려면 어떻게 해야 하는가?
아마도 이것은 사소한 질문일 것이다.
따라서 브라우저에서 vuejs 애플리케이션을 실행할 때 다운로드 속도 조절을 사용하도록 설정(연결 부족으로 설정)브라우저에서 완료되지 않은 vue 구문 출력을 받았어.
페이지 전체를 로드하기 전에 로드 이미지를 보여줌으로써 이 문제를 해결할 수 있는 가장 좋은 방법이 있을까?
올바른 CSS와 결합하면 컴파일이 완료될 때까지 Vue 인스턴스를 숨기는 v-cloak 지시어를 사용할 수 있다.
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-clook을 사용하는 다른 사람들이 제안한 바와 같이 적절한 해결책이다.그러나 @FriedD0D가 언급했듯이 그것은 IS의 투박함이다.간단한 해결책은 의사 선택기에 일부 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%;
}
물론 로더 이미지에 대한 유효하고 액세스 가능한 경로를 제공해야 한다.이렇게 될 겁니다.
도움이 되길 바래.
사용.v-cloak명령어: 당신은 vue 인스턴스 컴파일이 완료될 때까지 당신은 언트레이닝 콧수염 바인딩을 숨길 수 있다.CSS 블록을 사용하여 컴파일될 때까지 숨겨야 한다.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
이것<div>컴파일이 완료될 때까지 보이지 않을 것이다.
보다 나은 언더스트레이팅을 위해 로딩하는 동안 요소 숨기기 링크를 볼 수 있다.
HTML 파일에 vuej 구문을 포함하지 마십시오.
<!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 webpack 템플릿을 참조하십시오.
또 다른 해결책은 다음을 사용하는 것이다.
<!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")
})
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
사용하다<v-cloak>데이터를 관련 위치에 바인딩하기 전에 Vue 코드를 숨기십시오.그것은 실제로 Vue 문서상의 장소에 위치해 있어서 당신이 검색하거나 완전히 읽지 않으면 누구나 그것을 놓칠 수 있다.
모든 것을 안에 넣는다<template>나한테는 잘 먹혔어
그 내용은 Vue가 렌더링할 때까지 숨겨져 있다.
<!-- index.html -->
<div id="app">
<template>
<span class="name">{{ name.first }} {{ name.last }}</span>
</template>
</div>
/* index.js */
new Vue({
el: '#app',
data: {
name: { first: 'David', last: 'Davidovich'}
}
});
렌더링을 단순 래퍼 구성 요소로 이동하십시오.VueJS 초기화(예: new Vue(....)는 해당 단일 래퍼 구성 요소와 별도로 HTML을 포함해서는 안 된다.
당신은 "에에에에"를 가질 수도 있다.<app>Loading...</app>여기서 app는 로드 HTML 또는 텍스트가 로드될 때 교체되는 래퍼 구성요소다.
응, 사용할 수 있어.v-cloak나는 스핑킷 사용을 좋아한다. 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/
여러 Laravel 블레이드 파일이 있는 보기에서 v-clook을 사용하지만 작동하지 않는 사용자는 하위 블레이드 파일이 아닌 상위 블레이드 파일에서 v-clook을 사용해 보십시오.
나는 사용하는 것을 선호한다.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"그것도 효과가 있겠지만 더 복잡한 시나리오가 있을 수 있다.
'IT이야기' 카테고리의 다른 글
| 관찰 가능한 테이크아웃 취소작동하지 않을 때까지 (0) | 2022.03.27 |
|---|---|
| 각각은 JavaScript 배열의 함수 오류가 아님 (0) | 2022.03.27 |
| POST 요청을 보내는 방법? (0) | 2022.03.27 |
| Vue 3 및 Typecript - 메서드에서 데이터 속성에 액세스할 수 없음 (0) | 2022.03.27 |
| rxjs: Error: 순서대로 요소 없음 (0) | 2022.03.27 |