页面加载时如何隐藏VueJS语法？

也许这是一个琐碎的问题。

因此，当我在浏览器上运行vuejs应用程序并启用限制下载速度时（设置为低连接）。我在浏览器中未完成的vue语法输出。

我知道我们可以通过在加载整个页面之前显示加载图像来解决这个问题，但是有什么最好的解决方案吗？

您可以使用v-cloak指令，如果将其与正确的CSS结合使用，它将隐藏Vue实例，直到编译完成。

HTML：

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

CSS：

[v-cloak] { display: none; }

我附上了以下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

正如其他人建议的那样，使用v-cloak是正确的解决方案。但是，正如@ DelightedD0D提到的那样，它很笨重。一个简单的解决方案是在伪指令的伪选择器::before中添加一些CSS 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以更好地降低性能。

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

您可以将任何渲染移至简单的包装器 组件。VueJS初始化，例如新的Vue（....），除了那个单个包装器组件之外，不应包含任何HTML。

根据设置，您甚至可以<app>Loading...</app>在哪里app是包装器组件，其中任何正在加载的HTML或文本都将在加载时被替换。

用于<v-cloak>在将数据绑定到相关位置之前隐藏您的Vue代码。它实际上位于Vue文档上的某个地方，除非您进行搜索或仔细阅读，否则任何人都可能会错过它。

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

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

是的，您可以使用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"也可以，但是可能会有更复杂的情况。

对于那些在具有多个Laravel Blade文件的视图中使用v-cloak且无法正常工作的用户，请尝试在父刀片文件而不是任何子刀片文件中使用v-cloak。

本文地址：http://javascript.askforanswer.com/yemianjiazaishiruheyincangvuejsyufa.html
文章标签：javascript , vue.js
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载