vue.js
提醒：Vuejs 如今正處在快速發(fā)展中彤守，很多資源隨時都有可能過時（outdated）挺智，記得查看最新文檔饰迹，使用最新資源商架。
Vue 的官方說明
數(shù)據(jù)驅(qū)動的組件与纽，為現(xiàn)代化的 Web 界面而生侣签。
Vue.js（讀音 /vju?/, 類似于 view）是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件急迂。
Vue.js 自身不是一個全能框架——它只聚焦于視圖層影所。因此它非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合僚碎。另一方面猴娩，在與相關(guān)工具和支持庫一起使用時，Vue.js 也能完美地驅(qū)動復(fù)雜的單頁應(yīng)用勺阐。
關(guān)于 Vue 的作者
尤雨溪 / 昵稱：尤小右 / 英文名：Evan You
是個介于設(shè)計師和程序員之間的大牛卷中，設(shè)計能力比程序員好，編程能力比設(shè)計師（和普通程序員）好太多渊抽！
如今辭了工作蟆豫，專心投入到了 Vuejs 的發(fā)展和推廣中。
工作信息：
Meteor (2014 - 2016)
地區(qū)：海外 懒闷，美國
職位：Core dev
Google (2012 - 2014)
地區(qū)：海外 十减，美國
職位：Creative Lab
相關(guān)信息：
JavaScript Air Episode 016: JavaScript Frameworks: Vue.js
和 Vue.js 框架的作者聊聊前端框架開發(fā)背后的故事 | Teahour.fm
Vue 的基本用法
Vue 相比于 React 和 Angular 容易上手多了，因此我對 Vue 的學(xué)習(xí)主要以文檔為主愤估，視頻為輔（只有像我這種菜鳥才看視頻教程嫉称，真正的牛人文檔瞄幾眼就會了(-_-#)）。
下載使用（兩種方式）
直接下載并用 <script> 標(biāo)簽引入灵疮，Vue 會被注冊為一個全局變量织阅。
平時對于 Dom 操作比較頻繁的小項目可以直接這樣使用。
Vue.js 提供一個官方命令行工具震捣，可用于快速搭建大型單頁應(yīng)用荔棉。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程蒿赢。只需一分鐘即可啟動帶熱重載润樱、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目：
針對單頁應(yīng)用的構(gòu)建推薦使用這種方式，可以更好的體驗到 vue 所提供的組件化功能 （單文件組件）羡棵，順帶著享受到 webpack 帶來的流暢的自動化開發(fā)體驗壹若。
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個基于 "webpack" 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
Vue 的使用教程
廢話不多說，大家直接看官方文檔店展，已經(jīng)寫得非常棒了养篓。
頁面上的搜索功能可以快速幫助你定位到相關(guān)文檔說明，非常方便赂蕴。
針對相關(guān)問題的解決方法：
問題：Vue 還未實(shí)例化前柳弄， HTML 模板中的 "{{ }}"( Mustache 標(biāo)簽) 會暴露在用戶界面上，也就是說頁面有那么一瞬間會將所有的 "{{ }}" 都顯示出來概说，如何解決碧注？
解決：
方法一：使用 v-cloak 指令，這個指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯糖赔。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時萍丐，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
v-cloak 文檔說明
[v-cloak] {
? display: none;
}<div v-cloak>
? {{ message }}
</div>方法二：使用 v-text
v-text 文檔說明
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>問題：新增的 data 數(shù)據(jù)沒法同步響應(yīng)到頁面放典？
解決：認(rèn)真閱讀官方文檔里的深入響應(yīng)式原理逝变。
在實(shí)例創(chuàng)建之后添加屬性并且讓它是響應(yīng)的:
對于 Vue 實(shí)例，可以使用 $set(key, value) 實(shí)例方法：
vm.$set('b', 2)
// `vm.b` 和 `data.b` 現(xiàn)在是響應(yīng)的對于普通數(shù)據(jù)對象刻撒，可以使用全局方法 Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 現(xiàn)在是響應(yīng)的注意事項：
注意如果 prop 是一個對象或數(shù)組骨田，是按引用傳遞耿导。在子組件內(nèi)修改它會影響父組件的狀態(tài)声怔，不管是使用哪種綁定類型
針對同一個元素的后一個 watch 會覆蓋前一個 watch，無論是不是 deep
自定義指令內(nèi)部可以通過 this.vm.someKey 來訪問到組件的數(shù)據(jù)
自定義指令名不要有大寫舱呻，props 命名也不要有大寫
Vue 的組件化實(shí)踐
組件（Component）是 Vue.js 最強(qiáng)大的功能之一醋火。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼箱吕。在較高層面上芥驳，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能茬高。在有些情況下兆旬，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展怎栽。
使用上文提到的官方命令行工具：
目前可供使用的模板包括（模板名-說明）：
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.（一個簡易的 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.（一個簡易的 Browserify + vueify 設(shè)置行您，以便于快速開始）
simple - The simplest possible Vue setup in a single HTML file
相關(guān)閱讀：
Announcing vue-cli
（譯）Vuejs 自己的構(gòu)建工具 vue-cli
