VueJS「new Vue（）」在.js文件中不起作用

我剛開始使用VueJS進行編程，我無法理解爲什麼我無法將「新Vue（）」函數放入.js文件。我舉了一個我能想到的最簡單的應用程序的例子。如果我的HTML是這樣VueJS「new Vue（）」在.js文件中不起作用

<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正文中的<腳本>標記中，我沒有錯誤，並且一切正常。

爲什麼會發生這種情況？感謝您的關注。

來源

2017-05-09 Raffaele Lorini

如果您esterno.js是的，你告訴JS代碼，這是因爲

the javascript code is executed before the DOM is loaded 。如果將代碼放在<body>標記中，則可以確保代碼僅在DOM加載後才能執行，因此代碼爲application的元素已加載。

來源

2017-05-09 10:01:15 Sventies

非常感謝你，我知道我做錯了什麼，但我無法弄清楚，現在一切都看起來很明顯 –

腳本應該在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>

來源

2017-05-09 10:01:28 Oen44

VueJS「new Vue（）」在.js文件中不起作用

回答

相關問題