Vue.js会阻止classList.remove工作吗？

Question

我使用的是Vue.js，并且我希望在调用Vue构造函数之前隐藏元素，否则会向用户显示一堆花括号。我有以下几点：

HTML：

<div class="main hide-me" id="my-vue-element">
    <!-- stuff -->
</div>

CSS：

.hide-me {
    display: none !important;
}

JavaScript：

var myVueElement = document.getElementById("my-vue-element");

if (myVueElement) {
    var myApp = new Vue({
        el: myVueElement
      , data: {
            /* stuff */
        }
      , methods: {
            /* stuff */
        }
    });

    console.log(myVueElement);
    console.log(myVueElement.classList);
    myVueElement.classList.remove("hide-me");
    console.log(myVueElement.classList);
    console.log(myVueElement.getAttribute("class"));

控制台输出为：

DOMTokenList [ "main", "hide-me" ]
DOMTokenList [ "main" ]
main

但是，该元素没有出现，并且在Firefox和Chrome中使用DOM检查器显示hide-me类仍然存在。我试着用一个简化的例子来重现这一点，但我无法做到。我在这个项目中确实有jQuery，并且我发现使用$("#my-vue-element").removeClass("hide-me"); (甚至在上面的代码之后添加它)会导致类从DOM中删除。有什么想法吗？谢谢!

Answer 1

在Vue中应该避免直接的DOM操作。相反，你应该让Vue来做这件事(它在这方面做得很好)。所以请使用

<your-element
  :class="['always-present', {'optional':expression}]"
/>

其中将根据数据绑定expression添加/删除optional。

此外，如果您想要的只是显示/隐藏元素，则可以使用v-if、v-show或v-hide (即：v-if="expression")。

有关直接DOM操作在Vue中有意义的案例列表以及每个案例的缺点或潜在陷阱，请阅读Handling Edge Cases。

Answer 2

如果你使用Vue视图/组件和它们的内部模板代码，那么在Vue准备好之前，元素是不会被渲染的。

这意味着在路由器加载视图之前，app.vue内部不会显示任何内容

<template>
  <div id="app">
    <router-view/>
  </div>
</template>