Bagaimana cara menyembunyikan sintaks VueJS saat halaman sedang memuat?

156

mungkin ini pertanyaan sepele.

jadi, ketika saya menjalankan aplikasi vuejs saya di browser dengan memungkinkan kecepatan unduhan throttling (set ke koneksi rendah). Saya mendapat keluaran sintaks yang belum selesai di browser.

Sintaks Vue js muncul di browser

Saya tahu kami bisa menyelesaikan masalah ini dengan menampilkan gambar yang dimuat sebelum seluruh halaman dimuat, tetapi apakah ada solusi terbaik untuk memperbaikinya?

javascript vue.js antoniputra
sumber

Jawaban:

240

Anda dapat menggunakan arahan v-cloak , yang akan menyembunyikan instance Vue sampai kompilasi selesai.

HTML:

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

CSS:

[v-cloak] { display: none; }
Gus
sumber
di api mengatakan: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> itu berarti, saya harus menambahkan v-cloakatribut di setiap elemen yang saya ingin sembunyikan?
antoniputra
23
Hanya untuk Appdiv utama harus baik
Jeff
3
Ini bekerja tetapi manusia itu kikuk. Saya benar-benar berharap untuk sesuatu yang lebih elegan. +1 sekalipun
Wesley Smith
28
Sepertinya v-cloakharus menjadi default dan bahwa jika seseorang benar-benar ingin menunjukkan {{ }}mereka harus menggunakan sesuatu seperti v-uncloak.
nu everest
3
display:nonepada HTML yang ada, adalah tanda buruk untuk SEO. Saya pikir mungkin lebih baik menggunakan semacam overlay hingga pemuatan halaman.
T.Todua
41

Saya melampirkan codepen berikut. Anda dapat melihat perbedaannya dengan dan tanpa 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
sumber
1
ya saya mengerti ... terima kasih, codepen Anda akan membantu pendatang baru.
antoniputra
Anda masih mendapatkan {{test}} pertama sementara vuejs sedang memuat jadi itu bukan jawaban yang sempurna
twigg
12
@twigg Itulah intinya. Yang pertama menunjukkan tag biasa dan yang kedua menunjukkan tag terselubung menggunakan v-cloakatribut.
kb.
29

Seperti yang disarankan oleh orang lain menggunakan v-jubah adalah solusi yang tepat. Namun seperti @ DelightedD0D menyebutkan itu kikuk. Solusi sederhana adalah dengan menambahkan beberapa CSS di pemilih semu ::beforedari v-cloakdirektif.

Dalam file sass Anda / kurang sesuatu di sepanjang baris 

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

Tentu saja Anda harus memberikan jalur yang valid dan dapat diakses ke gambar loader. Ini akan membuat sesuatu seperti.

masukkan deskripsi gambar di sini

Semoga ini bisa membantu.

schartz
sumber
7

Menggunakan v-cloakdirektif Anda dapat menyembunyikan binding kumis yang belum dikompilasi sampai instance vue selesai dikompilasi. Anda harus menggunakan blok CSS untuk menyembunyikannya sampai dikompilasi.

HTML: 

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

CSS:

[v-cloak] {
  display: none;
}

Ini <div>tidak akan terlihat sampai kompilasi selesai.

Anda dapat melihat tautan ini Sembunyikan elemen selama memuat menggunakanv-cloak untuk mengecilkan lebih baik.

Summonjoy
sumber
5

Jangan sertakan sintaks vuejs apa pun di file 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>

Di JavaScript utama Anda, Anda dapat:

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

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

Lihat templat webpack vuetify untuk referensi.

Solusi lain adalah menggunakan:

<!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>

Dengan:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);

const app = new Vue({});

window.addEventListener("load", async () => {    
  app.$mount("#app")
})
ysdx
sumber
3

Anda dapat memindahkan render apa pun ke komponen pembungkus sederhana . Inisialisasi VueJS misalnya Vue baru (....) tidak boleh mengandung HTML apa pun selain dari komponen pembungkus tunggal.

Bergantung pada pengaturan Anda bahkan bisa memiliki di <app>Loading...</app>mana aplikasi adalah komponen pembungkus dengan memuat HTML atau teks di antaranya yang kemudian diganti saat memuat.

A. Hall
sumber
3 
**html**
<div v-cloak>{{ message }}</div>

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

Gunakan <v-cloak>untuk menyembunyikan kode Vue Anda sebelum mengikat data ke tempat yang relevan. Ini sebenarnya terletak di suatu tempat di dokumentasi Vue bahwa siapa pun mungkin akan melewatkannya kecuali Anda mencarinya atau membaca dengan seksama.

dakshinasd
sumber
2

Yap, Anda dapat menggunakan v-cloak, saya suka menggunakan spinkit , adalah pustaka hebat dengan hanya CSS, periksa contoh sederhana:

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>
Luaskan cuplikan

Tautan: - http://tobiasahlin.com/spinkit/

fitorec
sumber
1

Saya lebih suka menggunakan v-ifdengan properti yang dihitung yang memeriksa apakah data saya siap, seperti ini:

<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>

Dengan cara ini lebih mudah menampilkan loader hanya jika data tidak siap (menggunakan v-else).

Dalam kasus khusus ini v-if="variableName"akan berhasil juga, tetapi mungkin ada skenario yang lebih rumit.

Giorgio Tempesta
sumber
0

Bagi mereka yang menggunakan v-cloak dalam tampilan dengan beberapa file Blade Laravel dan itu tidak berfungsi, cobalah untuk menggunakan v-cloak pada file blade induk daripada pada file blade anak apa pun.

pengguna8581607
sumber