[译]Vue - 解决Cannot Find Element错误

如果你刚接触Vue，可能会遇到一些不熟悉的错误。实际上，我在创建delimiter app时看到了一个我不太熟悉的错误。例如，你可能在Vue里看到“Cannot find element”的错误。在Google Chrome中，你会在控制台窗口中看到此错误，如下所示：

发生这种错误是因为过早实例化Vue。通常情况下，你会看到此错误，是因为挂载Vue的HTML元素还没有加载到DOM里。如果在HTML页面的头部实例化Vue，就可能会发生这种情况，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
      var app = new Vue({
                   el: '#app',
               data: {
                message: 'Hello Vue.js!'
               }
             });
    </script>
  </head>
  <body>
    <div >
      <p>{{ message }}</p>
    </div>
  </body>
</html>

或者如果使用外部JavaScript文件导入你app，如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="/path/to/app/app.js"></script>
  </head>
  <body>
    <div >
      <p>{{ message }}</p>
    </div>
  </body>
</html>

这两种方法会在DOM加载完成前加载JavaScript。因此，你应该在HTML DOM加载完成后再初始化Vue对象。你可以把Vue相关脚本放在末尾的body标签之前来实现。这意味着HTML页面的骨架模板可能如下所示：

<!DOCTYPE html>
<html>
  <body>
    <div >
      <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        });
    </script>
  </body>
</html>

The approach above is a recommended approach. In fact, it's consistent with the W3C HTML 4 spec. Once you've updated your HTML such that your Vue code is instantiated after the rest of the DOM, you should be good to go. The cannot find element error will disappear and you can move forward with your app.

推荐使用上面的方法。实际上，它符合W3C HTML 4 规范。一旦你这样更新HTML，Vue代码会在DOM之后初始化。“Cannot find element” 错误将会消失，你可以继续开发你的app。

原文：Vue - Cannot Find Element

秒客网

[译]Vue - 解决Cannot Find Element错误

相关文章