có lẽ đây là một câu hỏi tầm thường
vì vậy, khi tôi chạy ứng dụng vuejs của mình trên trình duyệt với tốc độ tải xuống tiết kiệm (đặt thành kết nối thấp). Tôi nhận được đầu ra cú pháp chưa hoàn thành trong trình duyệt.
Tôi biết chúng ta có thể đánh lừa điều này bằng cách hiển thị tải hình ảnh trước khi tải toàn bộ trang, nhưng đó có giải pháp tốt nhất để khắc phục điều này không?
Câu trả lời:
Bạn có thể sử dụng chỉ thị v-cloak , sẽ ẩn đối tượng Vue cho đến khi quá trình biên dịch kết thúc.
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appdiv chính là ổn
v-cloaknên là mặc định và nếu ai đó thực sự muốn hiển thị thì {{ }}họ nên sử dụng cái gì đó như thế nào v-uncloak.
display:nonetrên HTML hiện có, là một lá cờ xấu cho SEO. Tôi nghĩ có thể tốt hơn khi sử dụng một số loại lớp phủ cho đến khi tải trang.
Tôi đã đính kèm codepen sau đây. Bạn có thể thấy sự khác biệt có và không có v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakthuộc tính.
Theo đề xuất của những người khác sử dụng v-cloak là giải pháp thích hợp. Tuy nhiên, như @ DelightedD0D đã đề cập, nó thật cục mịch. Giải pháp đơn giản là thêm một số CSS trong bộ chọn giả ::beforecủa lệnh v-cloak.
Trong sass / ít tập tin của bạn một cái gì đó dọc theo dòng
[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%;
}Tất nhiên, bạn cần cung cấp một đường dẫn hợp lệ và có thể truy cập đến hình ảnh trình tải. Nó sẽ làm cho một cái gì đó như.
Hy vọng nó giúp.
Sử dụng v-cloakchỉ thị, bạn có thể ẩn các ràng buộc ria mép chưa biên dịch cho đến khi phiên bản vue được biên dịch xong. Bạn phải sử dụng khối CSS để ẩn nó cho đến khi được biên dịch.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>CSS:
[v-cloak] {
display: none;
}Điều này <div>sẽ không được nhìn thấy cho đến khi quá trình biên dịch được hoàn thành.
Bạn có thể thấy liên kết này Ẩn các thành phần trong khi tải bằng cách sử dụngv-cloak tốt hơn.
Không bao gồm bất kỳ cú pháp vuejs nào trong tệp HTML:
<!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>Trong JavaScript chính của bạn, bạn có thể:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})Xem mẫu webpack vuetify để tham khảo.
Một giải pháp khác là sử dụng:
<!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>Với:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})Bạn có thể di chuyển bất kỳ kết xuất nào đến một thành phần trình bao bọc đơn giản . Việc khởi tạo VueJS, ví dụ Vue mới (....) không nên chứa bất kỳ HTML nào ngoài thành phần trình bao bọc đơn lẻ đó.
Tùy thuộc vào thiết lập bạn thậm chí có thể có <app>Loading...</app>nơi ứng dụng là thành phần wrapper với bất kỳ HTML tải hoặc văn bản ở giữa mà sau đó được thay thế trên tải.
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }Sử dụng <v-cloak>để ẩn mã Vue của bạn trước khi ràng buộc dữ liệu đến những nơi có liên quan. Nó thực sự nằm ở một vị trí trên tài liệu Vue mà bất kỳ ai cũng có thể bỏ lỡ trừ khi bạn tìm kiếm nó hoặc đọc kỹ.
Đúng, bạn có thể sử dụng v-cloak, tôi thích sử dụng spinkit , là một thư viện tuyệt vời chỉ với CSS, hãy kiểm tra một ví dụ đơn giản:
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>Liên kết: - http://tobiasahlin.com/spinkit/
Tôi thích sử dụng v-ifvới một thuộc tính được kiểm tra nếu dữ liệu của tôi đã sẵn sàng, như thế này:
<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>Theo cách này, chỉ hiển thị trình tải dễ dàng hơn nếu dữ liệu chưa sẵn sàng (sử dụng v-else).
Trong trường hợp cụ thể này v-if="variableName"cũng sẽ hoạt động, nhưng có thể có các kịch bản phức tạp hơn.
Đối với những người sử dụng v-cloak trong chế độ xem có nhiều tệp Laravel Blade và nó không hoạt động, hãy thử sử dụng v-cloak trên tệp lưỡi cha mẹ thay vì trong bất kỳ tệp lưỡi con nào.
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>có nghĩa là, tôi nên thêmv-cloakthuộc tính trong mọi phần tử mà II muốn ẩn?