正確寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="../node_modules/vue/dist/lesson1.js"></script>
</body>
</html>
或
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var lesson1=new Vue({
el: '#app',
data: {
message: '進擊的 Vue.js!'
}
});
</script>
</body>
</html>
錯誤寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../node_modules/vue/dist/lesson1.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
</html>
原因分析
參考 HTML頁面的加載順序
head標籤中會包含一些引用外部文件的代碼，從開始運行就會下載這些被引用的外部文件
當遇到script標籤的時候
瀏覽器暫停解析（不是暫停下載），將控制權交給JavaScript引擎（解釋器）
如果<script>標籤引用了外部腳本，就下載該腳本，否則就直接執行，執行完畢後將控制權交給瀏覽器渲染引擎
如果此時遇到body標籤中的<script>，同樣會將控制權交給JavaScript引擎來解析JavaScript
解析完畢後將控制權交還給瀏覽器渲染引擎。
當body中的代碼全部執行完畢、並且整個頁面的css樣式加載完畢後，css會重新渲染整個頁面的html元素
所以<script>寫到body標籤內靠後比較好，
因爲JavaScript 會操作html元素， 如果在body加載完之前寫JavaScript 會造成JavaScript 找不到頁面元素
但是我們經常將<script>寫到head中，body中不會有大量的js代碼，body中的html代碼結構會比較清晰
總結
用於數據綁定的js代碼應放在所有待解析的dom之後再執行，一勞永逸的做法是堅持把js文件寫在body最後再加載，有助於優化網頁加載，也減少了出錯率。