पृष्ठ लोड होने के दौरान मैं VueJS सिंटैक्स को कैसे छिपाऊँ?

156

शायद यह एक तुच्छ प्रश्न है।

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

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

javascript vue.js

— antoniputra
स्रोत

239

आप वी-क्लॉक निर्देश का उपयोग कर सकते हैं , जो संकलन खत्म होने तक वीयू उदाहरण को छिपा देगा।

HTML:

<div v-cloak>{{ message }}</div>

सीएसएस:

[v-cloak] { display: none; }

— गस
स्रोत

in Api कहता है: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> इसका मतलब है, मुझे v-cloakहर उस तत्व में विशेषता जोड़ना चाहिए जिसे II छिपाना चाहता है?

— अंटनीपुत्र

22

बस मुख्य Appdiv के लिए ठीक होना चाहिए

— Jeff

3

यह काम करता है लेकिन आदमी यह क्लूनी है। मैं वास्तव में कुछ और सुरुचिपूर्ण के लिए उम्मीद कर रहा था। +1 हालांकि

— वेस्ले स्मिथ

27

ऐसा लगता v-cloakहै कि डिफ़ॉल्ट होना चाहिए और अगर कोई वास्तव में दिखाना चाहता है तो {{ }}उन्हें कुछ का उपयोग करना चाहिए v-uncloak।

— nu सदाबहार

3

display:noneमौजूदा HTML पर, SEO के लिए एक बुरा ध्वज है। मुझे लगता है कि पेज लोड होने तक किसी तरह के ओवरले का उपयोग करना बेहतर हो सकता है।

— T.Todua

41

मैंने निम्नलिखित कोडपेन संलग्न किया है। आप के साथ और बिना अंतर देख सकते हैं 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

— gurghet
स्रोत

1

हाँ, मुझे मिल गया ... धन्यवाद, आपके कोडपेन नए कामर्स के लिए मदद करेंगे।

— एंटोनीपुत्र

आप अभी भी पहला {{परीक्षण}} प्राप्त कर रहे हैं, जबकि vuejs लोड हो रहा है, इसलिए इसका सही उत्तर नहीं है

— twigg

12

@Wigg यह बात है। पहला नियमित टैग दिखाता है और दूसरा v-cloakविशेषता का उपयोग करते हुए क्लॉक्ड टैग दिखाता है ।

— केबी

29

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

अपने sass / कम लाइनों में कुछ के साथ फ़ाइल

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

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

आशा करता हूँ की ये काम करेगा।

— schartz
स्रोत

7

v-cloakनिर्देश का उपयोग कर आप अन-संकलित मूंछें बाइंडिंग को छिपा सकते हैं जब तक कि वीयू उदाहरण संकलन नहीं किया जाता है। संकलित होने तक इसे छिपाने के लिए आपको CSS ब्लॉक का उपयोग करना चाहिए।

HTML:

<div v-cloak>
  {{ vueVariable }}
</div>

सीएसएस:

[v-cloak] {
  display: none;
}

यह <div>दिखाई संकलन के पूर्ण होने तक नहीं होगा।

बेहतर समझने के लिए लोडिंग के दौरानv-cloak आप इस लिंक को छुपाएँ तत्व देख सकते हैं ।

— Summonjoy
स्रोत

5

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>

अपने मुख्य जावास्क्रिप्ट में, आप यह कर सकते हैं:

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

संदर्भ के लिए vuetify वेबपैक टेम्पलेट देखें ।

एक और उपाय उपयोग करना है:

<!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")
})

— ysdx
स्रोत

3

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

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

— सभागार
स्रोत

3

**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }

— gotocartik
स्रोत

2

<v-cloak>प्रासंगिक स्थानों पर डेटा बाइंड करने से पहले अपना Vue कोड छिपाने के लिए उपयोग करें । यह वास्तव में Vue प्रलेखन पर एक जगह पर स्थित है कि कोई भी इसे याद कर सकता है जब तक कि आप इसके लिए खोज नहीं करते हैं या अच्छी तरह से पढ़ते हैं।

— dakshinasd
स्रोत

2

हां, आप उपयोग कर सकते हैं v-cloak, मुझे स्पिंकिट का उपयोग करना पसंद है , केवल सीएसएस के साथ एक महान पुस्तकालय है, एक सरल उदाहरण देखें:

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/

— fitorec
स्रोत

1

मैं 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"भी काम करेगा, लेकिन अधिक जटिल परिदृश्य हो सकते हैं।

— जियोर्जियो टेम्पस्टा
स्रोत

0

जो लोग कई लारवेल ब्लेड फ़ाइलों के साथ एक दृश्य में वी-क्लोक का उपयोग करते हैं और यह काम नहीं कर रहा है, किसी भी चाइल्ड ब्लेड फ़ाइल के बजाय पैरेंट ब्लेड फ़ाइल पर वी-क्लोक का उपयोग करने का प्रयास करें।

— user8581607
स्रोत