ページの読み込み中にVueJS構文を非表示にするにはどうすればよいですか？
回答:
コンパイルが完了するまでVueインスタンスを非表示にするv-cloakディレクティブを使用できます。
HTML：
<div v-cloak>{{ message }}</div>CSS：
[v-cloak] { display: none; }Appdiv だけに問題はありません
v-cloakれるのがデフォルトであり、誰かが本当に見せたいのなら、{{ }}彼らはのようなものを使うべきv-uncloakです。
display:none既存のHTMLでは、SEOの悪いフラグです。ページが読み込まれるまでは、なんらかのオーバーレイを使用する方が良いと思います。
以下のコードペンを取り付けました。ありとなしの違いを確認できます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が言及したように、それは不格好です。簡単な解決策は::before、v-cloakディレクティブの疑似セレクターにCSSを追加することです。
あなたの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して読み込み中に要素を非表示にすることができます。
HTMLファイルにvuejs構文を含めないでください。
<!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テンプレートを参照してください。
別の解決策は以下を使用することです：
<!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")
})
うん、あなたは使うことができますv-cloak、私はスピンキットを使うのが好きです、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>次の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"も機能しますが、より複雑なシナリオが存在する可能性があります。
複数のLaravelブレードファイルがあるビューでv-cloakを使用していて機能しない場合は、子ブレードファイルではなく、親ブレードファイルでv-cloakを使用してみてください。
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>それは、v-cloakIIが非表示にするすべての要素に属性を追加する必要があることを意味しますか？