快速上手Vue（適合懂基礎html、css和js的人）
快速上手Vue
前述
1. 目標是通過本文，快速瞭解Vue的基本原理和使用它進行簡單的開發
2. 只需要html、css、js基礎即可（原理涉及ES5，ES6，但對開發者來說不是必須要學的）
3. 這是根據我內部分享的PPT改寫的
目錄
1. 概述
2. 原理
3. 快速上手
4. 其他Vue常見功能
5. 使用Vue寫一個大型頁面
1、概述
Vue的優點：
- 輕量——最小隻需要17.14kb（Vue.js 2.0生產版本）—— jquery是87KB（3.1）95KB（1.12）
- 易學——相比較React和Angular來說，學習曲線平緩
- 易開發——支援熱載入（即修改原始碼後，無需重新整理即可在頁面上看到效果）
使用Vue的專案： 1. 天貓、餓了麼、小米商城、途牛、蘇寧易購、微博頭條 2. 其中某些使用了vue-native，也就是weex（比單純前端多了後端部分）
幾個典型特點： 1.資料驅動 1. jQuery和常規mvc程式設計的核心思想是dom操作，先有dom然後再操作。 2. Vue的核心思想是資料驅動，dom是為了資料服務的，資料可以生成dom、控制dom 2.生命週期 1. 建立時： 建立 → 繫結變數 → 掛載 → 模板編譯 → 插入頁面 2. 摧毀時： 摧毀前→摧毀後 3、封裝 1. 在開發中，html、css、js共同組成一個Vue的元件； 2. 相同元件的多次複用，不同元件被組合成一個更大的Vue例項； 3. 上一級Vue例項不直接對下級Vue例項進行修改，而是通過介面； 4. 元件的三級：中間可以根據不同端來呼叫不同的元件。 * 整個網站 * 單個頁面 * 頁面的某個模組（如登入） 5. 因此Vue.js先天具有封裝、繼承的特性，這是面向物件程式設計的重要特點。 4、單向/雙向繫結 單向：修改變數message的值，html裡顯示的內容自動變化。 雙向：針對input標籤。 利用的是setter和getter（es5）特性 
2、原理
專案結構：
開發環境 → 生產環境的過程：
內部實現原理：
1、建立一個Vue例項：
先引入Vue.js檔案，然後new一個Vue的例項即可。如下面的程式碼，通過<script src="./vue.js"></script>引入，然後在<script>標籤中建立例項
2、掛載
在Vue的例項裡，通過傳遞的el屬性
3、單向/雙向繫結
data屬性裡的變數 = html標籤裡的{{}} = input標籤裡的v-model <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="test"/>
{{test}}
</div>
<script>
new Vue({ //建立一個Vue的例項
el: "#app", //掛載點是id="app"的地方
data: { //資料
test: "abc" //變數test
}
})
</script>
</body>
</html>Vue例項解釋
- 將內容作為Vue例項的引數，建立的時候以物件的形式作為引數傳遞
- 常見內容有：
1. 變數被放在物件的data屬性中，型別是物件（有時候是函式，通過函式返回值獲取）；
2. 掛載點被放在el屬性中，型別是字串；
3. 方法被放在methodss屬性中，型別是物件；
4. 建立時執行內容被放在created屬性中，型別是函式；
5. 子元件被放在components屬性中，型別是物件 Dom控制
- 在使用jQuery的時候，我們需要手動新增dom、刪除dom，修改dom內容；
- 在Vue的時候，我們需要更換思維方式，用變數去控制dom；
- 具體而說：
1. 單個dom的新增/刪除/顯示/隱藏——變數控制
2. 多個在顯示上互斥的dom（如登入時的提示）—— 用１個變數去控制
3. 多個同類型dom（用v-for來動態生成）input相關
- 前端輸入內容大部分都是通過input標籤，Vue可以完美相容。
- 例如，微博的註冊頁面如下圖：
使用jQuery的情況下，流程如下：
Dom→值→驗證→（正確）提交→（錯誤）顯示錯誤提示Dom在Vue中，核心思想是資料驅動，因此，input標籤需要繫結的值直接和Vue例項裡的變數雙向繫結起來。
當用戶輸入值的時候，對應的變數值跟著改變；
當檢測輸入是否符合規定，只需要直接檢測對應變數的值即可；
表格
- 表格的核心特點是：型別重複的大量內容。
- Vue非常擅長對錶格的處理，只需要已知資料，預先設定好格式，即可自動生成資料。
- 常見表格需求是選擇性顯示（比如只顯示符合條件的項），這點Vue也十分擅長，你只需要設定好條件，Vue在渲染的時候會自動幫你完成。
4、其他Vue常見功能
1、過濾器功能：
1. 主要用於文字轉換；
2. 例如獲得一個日期物件後，通過過濾器命令自動轉為我們要求的日期格式。
3. {{ message | capitalize }} message變數被過濾器函式capitalize所處理
2、計算屬性：
1. 更加高階的功能，可以視為過濾器功能的進階版，適用的方向更多（不僅僅是文字）
2. 獲取一個變數（輸入內容）→通過計算函式轉換→顯示轉換結果（輸出內容）
3. 當輸入內容變更時，輸出內容也會自動隨之變更
4. 利用ES5的getter和setter特性來實現，有快取特點
計算屬性的官網示例
3、$watch方法：
1. 監控變數，當變數改變時觸發回撥函式；
2. 例如之前的微博註冊demo中，通過檢測表示省份的變數的變化，來動態設定表示市的dom
4、class/style繫結：
1. 通過改變變數，來設定dom的樣式的類，或者直接設定樣式的屬性
2. <div v-bind:class="{ active: isActive }"></div>
3. isActive值為true時，dom獲得active這個類
5、事件監聽：
1. 通過$emit觸發事件和$on響應事件，只在當前Vue例項內有效，因此不會帶來干擾；
2. 用起來非常舒服，適用於一對多和多對一的場景；
3. 跨元件響應（父子元件通訊）時，可以使用global event bus來實現，或者使用外掛實現
6、路由功能：
1. 簡單來說，按需載入，而不是一次性全部載入；
2. 有官方推薦支援使用的的vue-router庫；
5、使用Vue寫一個大型頁面
原則是，寫之前先從大往小拆分，搭好框架。
比如典型分拆有：header導航欄——main中間層——footer底部
寫的時候，從小往大組裝起來。
例如我寫的某個三級結構的demo的結構：
##頁面關係
event-bus.js //全域性事件（假如2個元件之間需要互動，則依靠這個），全域性配置
App.vue //根元件
|---- main-top.vue //頂部導航欄
|---- main-container.vue //使用者正常瀏覽區域
|---- main-foot.vue //頁面底部
|---- login.vue //登入後臺頁面
|---- news-manage.vue //新聞管理（後臺）
| |---- news-create.vue //新建新聞（傳送）
| |---- news-delete.vue //刪除新聞
|
|---- news-scan-list.vue //新聞列表
|---- news-view.vue //新聞閱讀頁面
|---- advice-post.vue //街辦信箱，用於提交意見
|---- advice-scan.vue //top標籤的瀏覽反饋
|---- advice-scan-list.vue //檢視反饋列表
|---- advice-scan-page.vue //檢視反饋頁面（本頁面有反饋，管理員編輯反饋也在本頁面）
以微博頁面為例，用vue來拆分時如何來寫：
1、先擷取微博的一部分圖，假設這個是二級元件（一級元件是根元件）
2、擷取其header部分，作為三級元件
3、然後再單獨抽出來logo右邊的搜尋框，作為四級元件，
logo歸屬於三級元件中，
其他四級元件有：
右邊的首頁、視訊那一排
4、四級元件裡包含以下：
1. html：一個input，一段提示文字（可以作為input的placeholder也可以作為一個單獨的span），一個搜尋圖示；
2. css：相應的樣式，具體略；
3. js：點選響應事件等；
4. 五級元件或者歸屬於本元件：輸入內容後，自動出現下拉提示框
全部拆分完成後，我們就可以從最下層開始，一個一個的寫功能點了，
然後再將其組裝起來，成為一個完整的vue專案