.js 文件中的 VueJS“new Vue()”不起作用答案

【问题标题】：VueJS " new Vue()" in .js file not working.js 文件中的 VueJS“new Vue()”不起作用
【发布时间】：2017-05-09 09:57:10
【问题描述】：

我刚开始使用 VueJS 进行编程，我无法理解为什么我不能将“new Vue ()”函数放在 .js 文件中。我用我能想到的最简单的应用程序做了一个例子。如果我的 HTML 是这样的

<html>
<head>
<meta charset="utf-8" />
<title>HBL</title>
<script src="https://unpkg.com/vue"></script>
<script src="esterno.js"></script>
</head>
<body>
  <div id="application">
     <greeting></greeting>
  </div>
</body>

我的 .js 也是这样的

Vue.component('greeting', {
template: '<h1>Basic Component</h1>'
});

var vm = new Vue({
 el: '#application'
 });

它没有显示任何内容，控制台显示此错误：“[Vue 警告]：找不到元素：#application”，但如果我打开 JSFiddle 并粘贴代码，它就可以工作。

如果我把 .js 文件的最后三行放在 html 正文中的标记中，我没有错误，一切正常。

为什么会这样？感谢您的关注。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

如果你的esterno.js是你展示的js代码，那是因为

the javascript code is executed before the DOM is loaded .没错，将下面的代码放在 <body> 标记中将确保代码仅在 DOM 执行一次，因此 id 为 application 的元素被加载。

【讨论】：

非常感谢，我知道我做错了什么但我无法弄清楚，现在一切看起来都很明显

【解决方案2】：

脚本应位于body 的末尾。我建议您在加载 DOM 时加载脚本。

<html>
<head>
<meta charset="utf-8" />
<title>HBL</title>
</head>
<body>
  <div id="application">
     <greeting></greeting>
  </div>
<script src="https://unpkg.com/vue"></script>
<script src="esterno.js"></script>
</body>

【讨论】：