前述
1. 目標是通過本文，快速了解Vue的基本原理和使用它進行簡單的開發2. 只需要html、CSS、js基礎即可（原理涉及ES5，ES6，但對開發者來說不是必須要學的）3. 這是根據我內部分享的PPT改寫的目錄
1. 概述2. 原理3. 快速上手4. 其他Vue常見功能5. 使用Vue寫一個大型頁面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、控制dom2.生命周期 1. 創建時： 創建 → 綁定變量 → 掛載 → 模板編譯 → 插入頁面 2. 摧毀時： 摧毀前→摧毀后3、封裝 1. 在開發中，html、css、js共同組成一個Vue的組件； 2. 相同組件的多次復用，不同組件被組合成一個更大的Vue實例； 3. 上一級Vue實例不直接對下級Vue實例進行修改，而是通過接口； 4. 組件的三級：中間可以根據不同端來調用不同的組件。 * 整個網站 * 單個頁面 * 頁面的某個模塊（如登錄） 5. 因此Vue.js先天具有封裝、繼承的特性，這是面向對象編程的重要特點。4、單向/雙向綁定 單向：修改變量message的值，html里顯示的內容自動變化。 雙向：針對input標簽。 利用的是setter和getter（es5）特性
項目結構： 
開發環境 → 生產環境的過程：
內部實現原理：
示例頁面： http://www.jianwangsan.cn/ppt/dom%E6%93%8D%E4%BD%9C.html
代碼： https://github.com/QQ20004604/quickly-start-vuejs/blob/master/dom%E6%93%8D%E4%BD%9C.html
使用jQuery的情況下，流程如下： Dom→值→驗證→（正確）提交→（錯誤）顯示錯誤提示Dom
在Vue中，核心思想是數據驅動，因此，input標簽需要綁定的值直接和Vue實例里的變量雙向綁定起來。 當用戶輸入值的時候，對應的變量值跟著改變； 當檢測輸入是否符合規定，只需要直接檢測對應變量的值即可；
demo： http://www.jianwangsan.cn/ppt/input.html
代碼： https://github.com/qq20004604/quickly-start-vuejs/blob/master/input.html
demo： http://www.jianwangsan.cn/ppt/grid.html
代碼： https://github.com/qq20004604/quickly-start-vuejs/blob/master/grid.html
1、過濾器功能：
1. 主要用于文本轉換；2. 例如獲得一個日期對象后，通過過濾器命令自動轉為我們要求的日期格式。3. {{ message | capitalize }} message變量被過濾器函數capitalize所處理2、計算屬性：
1. 更加高級的功能，可以視為過濾器功能的進階版，適用的方向更多（不僅僅是文本）2. 獲取一個變量（輸入內容）→通過計算函數轉換→顯示轉換結果（輸出內容）3. 當輸入內容變更時，輸出內容也會自動隨之變更4. 利用ES5的getter和setter特性來實現，有緩存特點計算屬性的官網示例
3、$watch方法：
1. 監控變量，當變量改變時觸發回調函數；2. 例如之前的微博注冊demo中，通過檢測表示省份的變量的變化，來動態設置表示市的dom4、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庫；原則是，寫之前先從大往小拆分，搭好框架。
比如典型分拆有：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項目
新聞熱點
疑難解答
