为什么需要在 body 标签中添加 Vue.js答案

【问题标题】：Why Vue.js needs to be add in the body tag为什么需要在 body 标签中添加 Vue.js
【发布时间】：2017-06-09 01:12:48
【问题描述】：

我在标题中添加了我的 vue.js，但它有一个错误说 找不到元素根，因为我有一个 id 为 root 的 div >.

但是当我将它添加到身体上时，一切正常。

这是我的 js 代码。

new Vue({
     el: '#root'
});

这是我的 html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
</head>
<body>

<div id="root">

    <task-list>


    </task-list>


</div>


</body>
</html>

【问题讨论】：

你能给我一份你的html样本

标签： javascript html vue.js

【解决方案1】：

你需要在身体的底部导入你的 vue js 库，因为你的#app HTML 容器需要先加载，然后才能被 vue js 分析。

<body>

<div id="app">
</div>
<script src="vue.js"></script>

</body>

【讨论】：

【解决方案2】：

您好，我在您的 html 中没有看到任何包含的 js（vue 包除外）。但我认为解决方案是将脚本放在页脚中。

如果这不起作用，请将其放入 window.onload

window.onload = function() {
    new Vue({
        el: '#root'
    });
};

【讨论】：

【解决方案3】：

您也可以在脚本中使用 defer 属性，这将确保在处理 Javascript 之前加载整个页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js" defer ></script>
    <!-- Assuming that you saved your vue code in a seperate file called vue.js -->
    <script src="vue.js" defer ></script>
</head>
<body>

<div id="root">

    <task-list>


    </task-list>


</div>


</body>
</html>

【讨论】：