[Vue] 불완전한 웹 페이지를 표시하지 않는 방법(v-cloak 명령)
입문
사용자가 불완전한 웹 페이지를 보지 못하도록 컴파일이 끝난 후에 어떻게 페이지를 표시합니까?
Vue.js에서
v-cloak 명령을 사용합니다.Vue.공식 문서
환경
- OS: macOS Catalina 10.15.1
- zsh: 5.7.1
- Vue: 2.6.10
결론: 인코딩
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak> # ここにv-cloak
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
[v-cloak] {
display: none;
}
var app = new Vue({
el: '#app',
data: {
message: "This is v-cloak directive."
}
})
v-cloak가 무엇입니까?
기준 공식 문서
이 명령은 연관된 Vue 인스턴스 컴파일이 완료될 때까지 유지됩니다.
이런 일.
컴파일이 끝날 때까지 보류
↓
번역이 끝나면 사라져요.
↓
display: none; 사라진 후 그려진다
※ 이번 코드에서
v-cloak 를 사용하지 않으면 {{ message }} 이 Mustache는 컴파일하기 전의 불완전한 상태에서 순간적으로 표시됩니다.배열: 컴파일 후 표시
이것은 CSS를 살짝 만지작거리고 컴파일해서 페이드인으로 표시하는 코드입니다.
index.html(변경 없음)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
@keyframes cloak-in {
0% { opacity: 0; }
}
#app {
animation: cloak-in 1s;
}
[v-cloak] {
opacity: 0;
}
var app = new Vue({
el: '#app',
data: {
message: "FADE IN..."
}
})
끝내다
끝까지 읽어주셔서 감사합니다
.지금까지는 중도에서 포기하는 상태를 보여주고 싶지 않은 요소에 대해 CSS는 시간을 몇 초 늦추어 표시했다.
v-cloak 컴파일이 완료된 시기를 지정할 수 있다면, 사용자의 통신 속도와 단말기 규격에 따라 표시하기 편리하다
참고로 사이트 (항상 감사합니다)
API — Vue.js
기본에서 Vue를 학습합니다.책
Reference
이 문제에 관하여([Vue] 불완전한 웹 페이지를 표시하지 않는 방법(v-cloak 명령)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/terufumi1122/items/b894236ecf1136a11019텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
