聲明一： 本人爲純後端開發，因爲一些非工作上的需要，本人必須得學一下前端Vue.js，此文章屬於前端入門級。
聲明二： 本文主要學習並整理自51CTO課程《Vue.js 2.0之全家桶系列視頻課程》，講師湯小洋，跳轉鏈接見文末。
第一個vue程序(入門示例)：
提示： vue入門非常簡單，這裏就不使用文字進行說明了，直接看html代碼示例即可明白。
html內容爲：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>哈嘍~</title>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
// 允許chrome的擴展程序【vue-devtools】進行調試
// 建議: 開發時，設置爲true; 生產時, 設置爲false
Vue.config.devtools = true
new Vue(
{
// 指定關聯的element
el: '#myId',
// 存儲數據(以json的形式)
data: {
msg: 'Helle World~'
}
}
);
}
</script>
</head>
<body>
<div id="myId">
<!-- 通過模板，動態顯示值 -->
{{msg}}
</div>
</body>
</html>
使用chrome打開：![在這裏插入圖片描述]()
注：chrome有一個名爲vue-devtools的擴展程序，對vue的調試提供了極大的便利，建議安裝(上圖就是本人安裝了該擴展程序後的調試界面的截圖)。
^_^ 如有不當之處，歡迎指正
^_^ 學習整理自
51CTO課程《Vue.js 2.0之全家桶系列視頻課程》講師 湯小洋
^_^ 參考鏈接
Vue.js中文官網
^_^ 本文已經被收錄進《程序員成長筆記(六)》，筆者JustryDeng