有点与Angular不同。希望在Vue实例编译完成之前消失变量名{{ message }}

2 年 ago
宇, 华
1 minute

因为经常接触Angular，所以脑海中的Angular和Vue有点混淆了。

尽管在 Angular 中也有类似的情况，但在 Vue.js 中，直到解析 {{ }} 变量之前，浏览器的屏幕上会短暂显示 {{ message }} 等变量名称，这让人感到不舒服。

那么，在Angular中称为ng-cloak的东西，在Vue.js中也有。不过，有一些与Angular稍有不同之处，我打算在此留下一些笔记。

这篇文章使用的是Vue.js v2.2.6。

v-cloak 和 ng-cloak 有何不同

使用 v-cloak 可以在 Vue 实例编译完成前，不在屏幕上渲染出 {{ }}。

在处理Angular时需要注意的一点是，

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

只需要设定一次，但是当使用v-cloak时

[v-cloak] {
  display: none;
}

这需要与 CSS 规则相结合。
我被这个问题困扰了一阵。如果不好好阅读参考文献就不会遇到这种情况。(；一___一)

使用实际的v-cloak进行简单的示例。

<html>
  <head>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      {{ message }}
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>
bannerAds