Vue.js防止布局跳转

我有几个Vue.js组件导致内容在加载时被推到一边。Vue.js防止布局跳转

为了解决这个问题，我创建了一些CSS规则是specfically针对我的Vue组件自定义HTML标记，像这样组成：

custom-tag { 
    float: left; 
    width: 150px; 
    // etc. 
}

这个例子将是一个CustomTag.vue。当Vue.js尚未将相应的Vue.js组件的自定义标签换出时，这将会生效。所以这实际上确保我的布局是正确的，即使没有JavaScript。

虽然这工作正常，但这还远远没有完美的解决方案。我觉得即使Vue.js被缓存并放入一个单独的供应商文件（只有135KB）（gzipped），它也需要很长时间才能生效。

我很难找到任何关于Vue.js的真实解决方案或信息，所以我想知道别人怎么处理这个问题？这是一个问题，我的结束JavaScript不加载速度不够快或什么？

2017-05-17 Stephan-v

您可能有兴趣使用[v-cloak]（https://vuejs.org/v2/api/#v-cloak） –

@Roy v-cloak用于在Vue之前从文档中移除花括号标签已加载。我正在讨论在组件加载之前为组件设置了默认值。这是完全不同的东西。没有语法来掩饰开始。 –

v-cloak *可以*用于去除花括号标签，但您可以用它来以任何喜欢的方式区分加载之前和加载之后。 –

这很奇怪，但也许它可能是非常长的模板，引擎必须在渲染前进行编译。

你应该首先考虑你的模板。我猜你不会这样做，如果你的HTML中有自定义标记在渲染之前...... 如果可以，使用single file components。如果你来自React，你也可以发现jsx for Vue有用，或者甚至手工编写渲染功能（虽然不推荐）。

如果你想完全消除第一次渲染的时间，唯一的办法就是做server-side rendering。所以你的应用程序将会与最初的html结构一起提供。

2017-05-19 08:04:04 Cobaltway

回答