带有v-cloak的框架页面:如何使用css加载div？Vue

Question

我正在使用Webpack/拉威尔和注入的id #app在我的页面上的vuejs，所以有骨架加载页面，我想有这个标记

 //client side, will show after ~0.2 seconds
<div id="app" v-cloak>
    <hello-world> 
</div

//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
    <div class="skeleton">
       <span class="skeleton_ribs"></span>
    </div>
</div>

当v-cloak和#app__loading中的所有内容被移除时，我设法在后台将加载gif显示为伪元素，但如果我在标记中添加普通元素，则它们在#app加载后出现在页面底部

[v-cloak] > * { display:none }

[v-cloak] + #app__loading::before {
  content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
  display: flex;
  justify-content: center;
  align-items: center;
}

但是我希望类似这样的东西可以在#app__loading中使用标记，但它不起作用

[v-cloak] > * { display:none }
#app-loader{
  display: block;
}
[v-cloak] #app::finish-loading{
  [v-cloak] #app-loader{
    display: none!important;
  }
} 

Answer 1

您似乎希望在app根元素的模板中找到初始元素的内容。使用$mount()函数时，Vue会将目标元素完全替换为已挂载元素的模板。

这种替换在某种程度上被这样一个事实所掩盖，即开箱即用的index.html包含一个<div id="app">，它被App.vue模板中的<div id="app">...</div>替换。

但它们实际上并不相关(而且不是同一个元素)。如果您更改了index.html中的id，则需要更改main.(js|ts)中的目标el。显然，您也可以更改App.vue中的id。

现在，要解决您的问题，您可以简单地将v-cloak放在App.vue中的div上。从您到目前为止所展示的内容来看，这应该会使它按预期工作。

对于更复杂的用例(即:如果您想触发绑定到初始元素的特定事件)，方法是将初始占位符包装在父元素中，绑定到父元素，然后在Vue中，使用this.$el.closest('.some-class')或this.$el.parentElement()指向父元素以访问绑定。

如果您仍然得不到预期的结果，请创建一个mcve (您可以使用codesanbox.io)，并详细描述预期的行为。

Answer 2

为了在找到合适的vue解决方案之前减轻您的麻烦，您可以通过id抓取装载器，并在Vue实例挂载时提供display none

export default {
        mounted() {
            document.querySelector('#app__loading').style.display = 'none';
        },
}