一、問題
1.1、環境
電腦環境：Windows 10；
開發工具：IntelliJ IDEA；
數據庫環境：Redis 3.2.100
JDK環境: Jdk1.8；
1.2、問題
使用Vue開發已經有2個多月了，應該後端的邏輯越來越“平庸”，作爲一個全棧程序員，前段開發的效率低，極大阻礙了我的開發效率，所以是時候系統地學習Vue這套JavaScript框架了；
Vue是什麼？
Vue是JavaScript框架，能夠簡化Dom操作，加快開發速度；而且是響應式數據驅動；
接下來，因爲是非純前段，我參考的是B站的黑馬程序員的視頻，因爲，跟着專業的人士學習，學習效率一定會快很多；總時長4小時；
今天的學習目錄是：
- 第一個Vue程序；
- el:掛載點；
- data:數據對象；
二、解答
1.首先，我需要新建一個項目：
2.選擇【Create New Project】
然後在頁面中選擇Vue.js
3.然後我們新增一個index.html文件：
4.引入vue.js
我們可以去Vue.js官網添加：
https://cn.vuejs.org/v2/guide/
也可以直接複製下面的這行代碼，但是建議大家去官網獲取下載地址，因爲官網的會更新，但是我的博客可能不能及時更新；
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
這樣，我們就能看到下面Run框裏，開始下載vue.js的依賴文件了；這個就像你在APP上剛下單，老闆就已經開始爲你準備商品，然後快遞小哥開始給你送貨了；不一會兒，Vue依賴的前段包就下載好了，就可以使用Vue相關的工具和依賴了；
這裏還十分友好地爲中國地區的開發者推薦淘寶鏡像：
所謂鏡像，就是我們從其他國家下載這些工具，可能比較慢，淘寶已經幫我們把這些工具和包copy了一份，放在淘寶的某個服務器上，這樣，我們就不用去外網下載了；類似於你想買一瓶可口可樂，但是從美國可口可樂公司買，需要1個月的時間；但是我們的小商店幫你提前把可口可樂買到小店了，這樣，你去樓下，幾分鐘就可以買到；大大縮短了時間；而且淘寶是免費爲大家提供這種服務的，感謝感謝；
插件和依賴的包下載完了之後，就會出現類似這樣的界面和提示：
5.然後我們在該html頁面中輸入如下的內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<div id="app">{{message}}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</html>
然後點擊下圖中的某個瀏覽器，因爲我使用的是谷歌瀏覽器，所以我就點擊這個谷歌的圖標，就可以看到谷歌瀏覽器新增了一個頁面，頁面裏顯示了我剛纔鍵入的內容
這裏，我們可以總結出以下幾點：
- 汽車：雙大括號可以綁定動態的值，message就像是一個被我們命名的車子，車裏裏面裝了【Hello Vue!】內容；因爲這個名爲message的車，外面有雙花括號包裹，這樣，這個單詞就被賦予了變量——車的含義；車中裝的東西，是不固定的，我們可以讓他裝蘋果，可以讓他裝石頭；我們讓這輛名爲message的車裝什麼，是在script標籤裏定義的；就像我是個卡車司機，我去A公司，A公司讓我送一車可樂，下午我又去了書店，書店讓我送了一車的書籍；這些都是要在script區域寫清楚的，不然我不知道送什麼；
- el標記了所選模塊，意思就是，我這車東西往哪裏運送，我們能看到它用井號綁定了標籤中id爲app的標籤，所以這輛車是往id爲app的標籤處行駛，那麼我怎麼知道他是一輛車而不是一塊不可移動的石頭呢；
- data綁定了這輛車裏面裝的是什麼；一般而言，一對花括號表示這是一個對象；一對中括號表示一個數組；而且，我剛剛犯了一個錯誤，準確的代碼是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<div id="app">{{message}}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</html>
我剛剛錯誤的代碼是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<div id="app">{{message}}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</html>
按照我錯誤的代碼，顯示的是如下結果：
就是說，引入script腳本的script標籤裏，不能寫邏輯，這點我不知道爲什麼？實驗來看，確實是不支持，這其中有什麼講究，希望前段大神能賜教：
而且，還要誇讚的一點是vue.js裏，所有地位對等的變量後面都可以加逗號，第一個可以加逗號，最後一個也可以加逗號，格式非常整齊，不用像mybatis裏一樣，最後一個條件，是不允許加逗號的，這點讓有輕微強迫症的我非常得舒服：
完畢~
三、總結
1.導入開發版本的Vue.js；
2.創建Vue實例對象，設置el屬性和data屬性；
3.使用簡介的末班語法把數據渲染到頁面上；（讓車子把貨物運送到頁面上）
參考資料：
1.黑馬程序員視頻：https://www.bilibili.com/video/BV12J411m7MG?p=3
2.Vue.js官網：https://cn.vuejs.org/
歡迎關注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公衆號：幕橋社區
知乎：張牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
簡書： https://www.jianshu.com/u/02c0096cbfd3