Vuejs - पृष्ठ लोड होने पर vuejs वाक्यविन्यास छुपाएं

Question

शायद यह एक मामूली सवाल है।

इसलिए, जब मैं ब्राउज़र पर अपने vuejs एप्लिकेशन चलाता हूं तो थ्रॉटलिंग डाउनलोड गति (कम कनेक्शन पर सेट) सक्षम करता है। मुझे ब्राउज़र में अधूरा vue वाक्यविन्यास आउटपुट मिला।

मैं जानता हूँ कि हम पहले पूरे पृष्ठ के लोड होते चित्र लोड करने दिखा के साथ इस बाहर चाल कर सकते हैं, लेकिन यह इसे ठीक करने के लिए किसी भी सबसे अच्छा समाधान है?

Answer 1

आप v-cloak निर्देश है, जो Vue उदाहरण छुपा देगा जब तक संकलन खत्म

Answer 2

मैं निम्नलिखित codepen संलग्न उपयोग कर सकते हैं। आप 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

Answer 3

आप एक सरल आवरणcomponent के लिए किसी भी प्रतिपादन के लिए कदम हो सकता है। VueJS प्रारंभिकरण उदा। नया व्यू (....) उस एकल रैपर घटक से अलग कोई HTML नहीं होना चाहिए।

सेटअप के आधार पर आप भी जहां एप्लिकेशन किसी भी लोड हो रहा है HTML या पाठ जो बीच में तो लोड पर बदल दिया जाता है साथ आवरण घटक है <app>Loading...</app> हो सकता था।

Answer 4

v-cloak का उपयोग करके दूसरों द्वारा सुझाए गए अनुसार उचित समाधान है। हालांकि @ DelightedD0D ने उल्लेख किया है कि यह उलझन में है। सरल समाधान v-cloak निर्देश के छद्म चयनकर्ता ::before में कुछ सीएसएस जोड़ना है।

अपने सास में/

[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%; 
} 

बेशक की तर्ज आप लोडर छवि के लिए एक वैध और सुलभ मार्ग उपलब्ध कराने की आवश्यकता होगी के साथ कम फ़ाइल कुछ। यह कुछ प्रस्तुत करेगा।

आशा है कि यह मदद करता है।