อาจเป็นคำถามเล็กน้อย
ดังนั้นเมื่อฉันรันแอปพลิเคชั่น vuejs บนเบราว์เซอร์พร้อมเปิดใช้งานความเร็วในการควบคุมปริมาณการดาวน์โหลด (ตั้งค่าเป็นการเชื่อมต่อต่ำ) ฉันได้ผลลัพธ์ไวยากรณ์ vue ที่ยังไม่เสร็จในเบราว์เซอร์
ฉันรู้ว่าเราสามารถหลอกลวงสิ่งนี้ด้วยการแสดงภาพที่โหลดก่อนที่จะโหลดหน้าทั้งหมด แต่มันมีทางออกที่ดีที่สุดในการแก้ไขปัญหานี้หรือไม่?
คำตอบ:
คุณสามารถใช้คำสั่งv-cloakซึ่งจะซ่อนอินสแตนซ์ Vue จนกว่าการรวบรวมจะเสร็จสิ้น
HTML:
<div v-cloak>{{ message }}</div>CSS:
[v-cloak] { display: none; }Appdiv หลักควรจะดี
v-cloakควรจะเริ่มต้นและว่าถ้ามีคนอยากจะแสดงพวกเขาควรจะใช้สิ่งที่ต้องการ{{ }} v-uncloak
display:noneบน HTML ที่มีอยู่เป็นค่าสถานะที่ไม่ถูกต้องสำหรับ SEO ฉันคิดว่ามันอาจจะดีกว่าถ้าใช้การซ้อนทับบางชนิดจนถึงการโหลดหน้าเว็บ
ฉันแนบ codepen ต่อไปนี้ 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 พูดถึงมันเป็น clunky วิธีง่ายๆคือการเพิ่ม 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>จะไม่ปรากฏจนกว่าการรวบรวมจะเสร็จสิ้น
คุณสามารถดูลิงค์นี้ซ่อนองค์ประกอบระหว่างการโหลดโดยใช้v-cloakเพื่อการเข้าใจที่ดีขึ้น
อย่ารวมไวยากรณ์ vuejs ใด ๆ ในไฟล์ 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>ใน JavaScript หลักของคุณคุณสามารถ:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})ดูvuetify webpack templateสำหรับการอ้างอิง
อีกวิธีคือการใช้:
<!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")
})คุณสามารถย้ายการแสดงผลใด ๆ กับการที่ง่ายห่อหุ้ม ส่วนประกอบ การกำหนดค่าเริ่มต้นของ VueJS เช่นVue ใหม่ (.... )ไม่ควรมี HTML ใด ๆ นอกเหนือจากองค์ประกอบ wrapper เดียว
ขึ้นอยู่กับการตั้งค่าคุณอาจมี<app>Loading...</app>ตำแหน่งที่แอพเป็นส่วนประกอบของแรปเปอร์ที่มีการโหลด HTML หรือข้อความระหว่างนั้นจะถูกแทนที่ด้วยโหลด
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }ใช้<v-cloak>เพื่อซ่อนรหัส Vue ของคุณก่อนผูกข้อมูลกับสถานที่ที่เกี่ยวข้อง ที่จริงแล้วมันอยู่ในสถานที่บนเอกสาร Vue ที่ทุกคนอาจพลาดได้เว้นแต่คุณจะค้นหาหรืออ่านอย่างละเอียด
ใช่คุณสามารถใช้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 ในมุมมองที่มีไฟล์ Laravel Blade หลายไฟล์และมันไม่ทำงานให้ลองใช้ v-cloak ในไฟล์เบลดพาเรนต์แทนที่จะใช้ไฟล์เบลดขนาดเล็ก
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>มันหมายความว่าฉันควรเพิ่มv-cloakคุณสมบัติในทุกองค์ประกอบที่ II ต้องการซ่อน?