原因：瀏覽器渲染機制，解析html結構 -> 加載外部腳本和樣式表文件 -> 解析並執行腳本代碼 -> 構造html dom模型 -> 加載圖片等外部文件 -> 頁面加載完畢。
初始化vue的js寫在頁面底部，也就是最后才執行js腳本。
所以頁面從頭到尾開始渲染時，渲染到標簽時，由於vue還未初始化，所以就會顯示類似這樣的代碼
<h2>{{courseName}}</h2>
當網速很慢的時候就看得比較清楚，可能會讓用戶誤以為bug之類的，快一點的話就是一閃而過，體驗不是很好
解決辦法：
1、網上說的很多都是用v-cloak，
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak]{
display: none;
}
但是我用了下無效，可能哪里使用的不對？然后就干脆按自己的思路實現了
2、我現在實現解決的方式，給最外層div加個class='hide'(.hide{display: none}，注意這個樣式要寫在head里)，然后在vue初始化完成后，移除這個類hide，大概代碼如下
<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>標題</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div id="app" class="hide">
<h2>{{courseName}}</h2>
</div>
<script>
//初始化vue
initVue()
function initVue() {
new Vue({
el: '#app',
data: function () {
return {
datas:{
courseName:''
}
}
},
mounted() {
//移除隱藏樣式
document.querySelector('#app').classList.remove('hide')
}
})
}
</script>
</body>