1.外部引入js引入
當引入外部js的時候，一般放在html的head中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="vueTest.js"></script>
</head>
<body>
<div id="app">
<span v-bind:name="spanName">{{ message }}</span>
</div>
</body>
</html>
但是有時候外部引入的js文件中會使用html中的DOM，此時如果在html文件的head中引入，執行引入文件的時候，因為DOM不存在而導致報錯。
這種情況下應該如何解決呢？
1. 將script的引入放到body最后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:name="spanName">{{ message }}</span>
</div>
<script src="vueTest.js"></script>
</body>
</html>
2. 修改外部引入的js文件的寫法
使用onload或者jQuery中的$(document).ready(function)
2.外部引入的js如何寫
1.head內引入，並且有dom操作
一般情況下，按照在html文件中script的格式寫及可，但是當有dom操作時，加載js文件時有dom操作時，此時放到head中會有問題，那么該如何修改呢？
1.使用window.onload
在寫的外部js文件的時候，外部包上window.onload
window.onload=function(){
//你寫的js文件
}
這種可以將js在header中引用而不報錯，但是，onload是無法多次執行的，如果你有多個js文件需要引用，使用多個onload方法的話，第二個onload方法會將第一個onload覆蓋，導致報錯
2.使用jQuery中的$(document).ready(function)
先在html中引入jQuery庫
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
在外部引用的js代碼用$(document).ready(function)包起來
$(document).ready(function)的3種寫法
第一種方式
$(document).ready(function(){
// 你寫的js的代碼
});
第二種方式
$().ready(function（）{
// 你寫的js的代碼
});
第三種方式
// 最簡單的寫法
$(function（）{
// 你寫的js的代碼
});
$(document).ready是在表單DOM加載后，圖片等請求加載前執行，將代碼放到里面，html引入的時候，不管是引入到head里還是body后面，都不會報錯了！
2.放到body結尾或沒有dom操作
沒有dom操作，或者放到body結尾時，此時不用考慮報錯問題，但是一般情況下也不會寫代碼，而是通過匿名函數的方式，目的是為了防止windows對象的污染
(function(){
// 具體代碼實現
}())
舉例說明，當沒有使用匿名函數的時候
var a="111";
console.log("111");
運行時，可以通過在windows上拿到a的值
使用匿名函數
(function(){
var a="111";
console.log(a);
}())
運行時
