作為一個iOS開發從業者，前段時間因為公司的需求剛剛學習並開發完成一個屬於前端開發工程師的任務-微信小程式（因為公司規模較小，人員配置不完全，十分無奈），深有感慨。對於移動端原生開發的iOS，Android的雙端開發，中小型公司為了節約開發成本，必然青睞於跨平臺的移動端應用。不管是React Native還是騰訊的微信小程式亦或者阿里的weex等基於JavaScript和HTML5為開發基礎的開發模式，都為初期創業者打開了一扇新的大門。作為一個底層程式設計師，為了順應時代潮流，不斷學習和累積自己的開發經驗，說通俗點就是為了自己的飯碗（iOS開發應聘競爭激烈，人員眾多，都是淚點），只好在不斷加深本身職業（iOS開發)開發經驗的同時，學習拓展新的知識。究竟是一門心思的研究自己本身職業，提高開發水平，還是多學習一些其他的開發知識，十分苦惱。我並不知道自己的選擇對不對，但是學習這件事本身並沒有對錯，所以不管其他，先學吧。
Vuejs是前端開發框架，使用MVVM框架，資料驅動，具有元件化，輕量，簡潔，高效等優點。本人有點HTML和CSS的基礎知識，然而並不精通，學習並開發過一段時間的微信小程式，以此為敲門磚，拓展前端開發知識，簡單說起來，基本屬於零基礎學習。
第一章簡介

前置知識：javaScript，Html，Css基礎和開發經驗，VUE.js的進階課程，需要掌握vue.js基礎一定掌握。ES6開發

1.VUE優點：MVVM框架，資料驅動，元件化，輕量，簡潔，高效

2.專案：需求分析，腳手架工具，資料mock，架構設計，程式碼編寫，自測，編譯打包

3.程式碼：程式碼開發及測試環節，3.1.1UI標註3.1.2真實資料演示
程式碼規範：3.2.1.架構設計，3.2.2.元件抽象，3.2.3.模組拆分 3.2.4.程式碼風格統一 3.2.5.JS變數命名規範 6.CSS程式碼規範

4.功能技術分析
4.1使用Vue-resource和後端做資料互動，
Vue-router做前端路由，實現單頁應用，
第三方js庫better-scroll 列表滾動實現，
最大程度元件化：實現元件複用。
html5的localstorage儲存瀏覽器端（資料儲存？）
圖示字型的使用，移動端1畫素邊框，css stiky footer佈局，felx彈性佈局

第二章：課程安排
掌握Vue.js在實戰中的運用 Vue.js入門基礎
學會使用Vue.js完整地開發移動端App
學會元件化，模組化的開發方式

學習內容
Vue.js框架介紹
Vue-cli腳手架 搭建基本程式碼框架
Vue-router官方外掛管理路由
Vue-resource Ajax通訊
Webpack 構建工具
es6+eslint selint:es6程式碼風格檢查工具

工程化，元件化，模組化
移動端常用開發技巧：flex彈性佈局，Css stickyfooter 酷炫的互動設計

2.1Vue.js介紹-近年來前端開發趨勢
舊瀏覽器逐漸淘汰，移動端需求增加
IE6-IE8 不支援ES5特性
IE9+ Chrome，safari，firefox對ES5完全支援

前端互動越來越多，功能越來越複雜
高大上的技術庫和框架，酷炫的運營活動頁面，H5小遊戲
架構從傳統的後臺MVC向REST API+ 前端MV*遷移

MV*包括了MVC,MVP,MVVM（vue.js屬於）

2.2Vue.js介紹-MVVM框架

View ViewModel Model
檢視 通訊 資料
DOM 觀察者 JavaScript物件

應用場景：針對具有複雜互動邏輯的前端應用
提供基礎的架構抽象
通過Ajax資料持久化，保證前端使用者體驗

MVVM框架：Angular.js react.js vue.js

2.3Vue.js介紹-什麼事vue.js及Vue.js生態
2014年初開源，起初vue定位是個檢視容器並不是框架
它是一個輕量級MVVM框架
資料驅動+元件化的前端開發
github 超過25K+的star數，社群完善

2.4Vue.js介紹-對比Angular,React
前端技術選型
參考：
社群如何很重要
Vue.js更輕量，gzip後大小隻有20K+
Vue.js更容易學習，學習曲線平穩
Angular，Java後端思想偏高

吸收了兩家之長，借鑑了angular的指令和react的元件化

2.5Vue.js介紹-Vue.js核心思想
資料驅動，元件化
Dom是資料的一種自然對映

資料響應原理

元件化

元件設計原則

頁面上每個獨立的可視/可互動區域視為一個元件
每個元件對應一個工程目錄，元件所需要的各種資源再這個目錄下就近維護

頁面不過是元件的容器，元件可以巢狀自由組合形成完整的頁面