Vue 基礎知識
基本介紹
Vue.js
Vue是一款優秀的過程開源框架，也是現在WEB工程師必會的一項技能。
它是一個漸進式的框架，所謂漸進式是指你可以對你的專案程式碼進行漸進的重構，比如最開始你的專案中所有頁面的程式碼全部是由jQuery構建的，如果想將其重構為Vue的話則可以對某一些頁面進行重構，這並不會影響其他頁面的正常使用。
目前Vue3正式版已經出來了，但是新手玩家學習還是從Vue2入手，再遞進到Vue3。
安裝方式
CDN引入：
<!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
本地引入，下載地址：
<!-- 官方開發版本 -->
https://cn.vuejs.org/js/vue.js
<! -- 官方生成版本 -->
https://cn.vuejs.org/js/vue.min.js
NPM安裝：
# 最新穩定版
$ npm install vue
Vue特點
基本概念
使用Vue開發和jQuery開發是兩種截然不同的體驗，Vue是宣告式的程式語言，而jQuery是命令式的程式語言。
使用jQuery你可能會經常想，下一步我該怎麼做，從細節到全域性。
但是使用Vue則是會有一個很良好的全域性觀，是由全域性到細節的。
這裡不多說明，後續將會慢慢體會。
單頁面開發
Vue是單頁面開發，即頁面用不重新整理，用一個頁面來展示不同的內容。
在Vue中有一個元件的概念，暫時可以這麼理解。一個頁面上有一個根標籤（根元件），並且其中包含很多子標籤（子元件），通過使用者不同的操縱狀態由Vue決定展示或隱藏哪些其內部的子標籤（子元件）。
這其實就是單頁面開發的概念，如圖所示：
簡單體驗
初次上手
下面是使用Vue列印HELLO,WORLD，通過這個小案例你可以瞭解Vue的基本使用。
- 首先要生成一個
Vue例項。 - 使用
el來掛載元素，可以使用CSS選擇器，以及JavaScript的選擇器拿到原生DOM元素進行掛載。 - 將資料存放至
data中。 - 使用
Vue的mustache語法對data中的資料進行渲染，令其展示到被掛載元素模板上。
- 首先要生成一個
注意！HTML以及BODY標籤不允許掛載
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "HELLO,WORLD",
}
})
</script>
</body>
代理器
Vue中大量使用代理器Proxy，如下所示，msg明明是data物件的屬性，但是通過app這個Vue例項也可以對他進行訪問：
MVVM
MVVM是Model-View-ViewModel的縮寫，是一種設計思想。
- View：檢視層（UI 使用者介面）
- ViewModel：業務邏輯層（一切 js 可視為業務邏輯）
- Model：資料層（儲存資料及對資料的處理如增刪改查）
當Vue通過對DOM的監聽，則可動態的從後端伺服器獲取資料，同時被監聽的DOM元素當狀態發生改變時，也將通過Vue把資訊傳遞給後端伺服器。
如上述程式碼中，可以進行如下劃分：
| 部分 | 描述 |
|---|---|
| 被掛載元素模板，即div標籤中的內容 | View，檢視層 |
| 整個script標籤中的內容 | ViewModel，模型層 |
| Vue例項中data中的內容 | Model，資料層 |
f