序言
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫浊仆，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的客峭。相比于Angular.js，Vue.js提供了更加簡潔抡柿、更易于理解的API舔琅，使得我們能夠快速地上手并使用Vue.js。
同時(shí)洲劣，Vue基于webpack來進(jìn)行開發(fā)备蚓。
Vue API：http://cn.vuejs.org/v2/api/
解析MVVM模式
- MVVM模式（Model-View-ViewModel）
- 從View側(cè)看，ViewModel中的DOM Listeners工具會幫我們監(jiān)測頁面上DOM元素的變化闪檬，如果有變化星著，則更改Model中的數(shù)據(jù)；
- 從Model側(cè)看粗悯，當(dāng)我們更新Model中的數(shù)據(jù)時(shí)虚循，Data Bindings工具會幫我們更新頁面中的DOM元素。
使用Vue的過程就是定義MVVM各個(gè)組成部分的過程的過程样傍。
- 定義View
- 定義Model
- 創(chuàng)建一個(gè)Vue實(shí)例或"ViewModel"横缔，它用于連接View和Model
- 創(chuàng)建Vue實(shí)例時(shí)，需要傳入一個(gè)選項(xiàng)對象衫哥，選項(xiàng)對象可以包含數(shù)據(jù)茎刚、掛載元素、方法撤逢、模生命周期鉤子等等膛锭。
雙向綁定示例
MVVM模式本身是實(shí)現(xiàn)了雙向綁定的，在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定蚊荣。
<!--這是我們的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
<!--將message綁定到文本框初狰，當(dāng)更改文本框的值時(shí)，<p>{{ message }}</p> 中的內(nèi)容也會被更新互例。-->
開始實(shí)戰(zhàn)
為了達(dá)到快速的開發(fā)奢入，我們可以使用Vue的各種模版，首先我們得先構(gòu)建一下開發(fā)環(huán)境媳叨。
- 安裝node
- 安裝Vue官方命令行工具
Vue.js 提供一個(gè)官方命令行工具腥光，可用于快速搭建大型單頁應(yīng)用关顷。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程武福。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init [webpack模版] [my-project項(xiàng)目名]
# 進(jìn)入項(xiàng)目目錄
$ cd my-project
# 執(zhí)行模塊的下載安裝议双，所需模塊的配置信息在 package.json 中
$ npm install
# 執(zhí)行 dev 腳本（也在 package.json 中），即項(xiàng)目開發(fā)模式
$ npm run dev
# npm run build 執(zhí)行 build 腳本艘儒，項(xiàng)目文件打包生成
ios 不要忘記給予權(quán)限哦聋伦！sudo npm install 即可
vue-cli會有幾種模版：
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.（全功能的 Webpack + vue-loader 設(shè)置，包括熱加載界睁，靜態(tài)檢測觉增，測試，css 提确濉）
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.（一個(gè)簡易的 Webpack + vue-loader 設(shè)置逾礁，以便于快速開始）
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.（全功能的 Browserify + vueify 設(shè)置，包括熱加載访惜，靜態(tài)檢測嘹履，單元測試）
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.（一個(gè)簡易的 Browserify + vueify 設(shè)置，以便于快速開始）
- simple - The simplest possible Vue setup in a single HTML file
相關(guān)閱讀：Announcing vue-cli（譯）Vuejs 自己的構(gòu)建工具 vue-cli
Vue初始化
命令行輸入：
npm run dev
這一行命令代表著它會去找到package.json的scripts對象债热，執(zhí)行node bulid/dev-server.js砾嫉。在這文件里，配置了Webpack窒篱，會讓它去編譯項(xiàng)目文件焕刮，并且運(yùn)行服務(wù)器，我們在localhost:8080即可查看我們的應(yīng)用墙杯。
效果如下：
