364
技術社區[雲棲]
Vue.js快速入門
Vue.js簡介
Vue.js（讀音 /vjuː/, 類似於view）是一套構建用戶界麵的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫隻關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方麵，Vue 完全有能力驅動采用單文件組件和Vue生態係統支持的庫開發的複雜單頁應用。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
作為前端的三大框架之一（其他兩個是Angular、React），Vue得到了大多前端開發者的青睞，最新版本為2.4.4 。和其他框架對比，也是各有優劣，相關的介紹，讀者可以參考筆者之前的文章：VueJs與其他框架的對比。
總的來說，可以總結為如下：
優點：
- 簡單：官方文檔很清晰，比 Angular 簡單易學。
- 快速：異步批處理方式更新 DOM。
- 組合：用解耦的、可複用的組件組合你的應用程序。
- 緊湊：~18kb min+gzip，且無依賴。
- 強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)。
- 對模塊友好：可以通過 NPM、Bower 或 Duo 安裝，不強迫你所有的代碼都遵循 Angular 的各種規定，使用場景更加靈活。
缺點
- 大而全：學習起來有難度，對於我來講學習曲線很曲折，比較難理解一些。
- 推翻重寫：Vue重寫了部分底層，等於是說在2.0版本又需要從頭開始學習，對於習慣了1.x的開發者來說又需要重新學習。
- 不支持IE8以下，因為Vue使用ES5書寫。
MVVM模式
Vue.js 可以說是MVVM 架構的最佳實踐，專注於 MVVM 中的 ViewModel，不僅做到了數據雙向綁定，而且也是一款相對比較輕量級的JS 庫，API 簡潔，很容易上手。
所謂MVVM市值Model-View-ViewModel三者的關係。這裏可以見到的介紹下MVVM框架：
- Observer 數據監聽器，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者，內部采用Object.defineProperty的getter和setter來實現。
- Compile 指令解析器，它的作用對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。
- Watcher 訂閱者， 作為連接 Observer 和 Compile 的橋梁，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數。
- Dep 消息訂閱器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變動觸發notify 函數，再調用訂閱者的 update 方法。
而在Vue框架中，ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。那麼ViewModel是如何實現雙向綁定的呢？
Vue.js 是采用 Object.defineProperty 的 getter 和 setter，並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍曆它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
從圖中可以看出，當執行 new Vue() 時，Vue 就進入了初始化階段，一方麵Vue 會遍曆 data 選項中的屬性，並用 Object.defineProperty 將它們轉為 getter/setter，實現數據變化監聽功能；另一方麵，Vue 的指令編譯器Compile 對元素節點的指令進行掃描和解析，初始化視圖，並訂閱Watcher 來更新視圖， 此時Wather 會將自己添加到消息訂閱器中(Dep),初始化完畢。當數據發生變化時，Observer 中的 setter 方法被觸發，setter 會立即調用Dep.notify()，Dep 開始遍曆所有的訂閱者，並調用訂閱者的 update 方法，訂閱者收到通知後對視圖進行相應的更新。
Vue.js環境搭建
本文教程以macOS為準，window上搭建類似。
1，安裝Node環境
Vue項目通常通過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，所以首先要安裝node.js。node.js的官方地址為：https://nodejs.org/en/download/，下載相應版本安裝即可。
安裝完畢之後，在命令行下驗證是否安裝成功：輸入npm -v ，顯示版本信息就表示安裝成功。
2，安裝cnpm
安裝完node之後，npm包含的很多依賴包是部署在國外的，為了加快依賴包的加載速度，開發中一般選擇使用國內的鏡像。cnpm是淘寶對npm的鏡像服務器，安裝命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3，vue-cli安裝
vue-cli是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。隻需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。安裝命令如下：
cnpm install -g vue-cli
安裝完後，檢查是否安裝成功，輸入vue(或者使用vue -v查看版本信息)，出現相關的幫助信息則說明安裝成功。
4，新建項目
新建一個項目文件夾（如 vue），cd到此文件夾，輸入init命令新建一個vue項目:
vue init webpack vue-demo
說明：我們暫時不適用模板提供的測試框架，如Karma + Mocha，以及Nightwatch。
初始化的項目的目錄如下：
關於目錄結構的介紹後麵會專門給大家介紹。接下來，cd到vue-demo 文件夾下，執行命令安裝項目依賴包：
cnmp install
接下來，在命令行裏輸入命令： cnpm run dev，執行完成後啟動項目，瀏覽器出現以下接結果，說明啟動成功。
最後更新：2017-09-30 08:03:56