先說一句題外話，對(duì)于 Vue 的探索和應(yīng)用我只服 ElemeFE

基礎(chǔ)

• 軟件工程學(xué)

• 代碼風(fēng)格

• 基本功

• Vue.js 官方文檔

• ES6

Vue 三大特性

數(shù)據(jù)的雙向綁定

通過數(shù)據(jù)綁定連接 View 和 Model， 讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新。

數(shù)據(jù)驅(qū)動(dòng)的組件系統(tǒng)

用嵌套的組件樹來描述用戶界面，每一個(gè)組件對(duì)應(yīng)MVVM中的ViewModel。

基于構(gòu)建工具的單文件組件系統(tǒng)

借助webpack強(qiáng)大的loader API，來定義對(duì)不同文件格式的預(yù)處理邏輯，從而將 vue 文件當(dāng)作 javascript 模塊來使用，從而極大提升了代碼的可復(fù)用性。

開始

俗話說“工欲善其事必先利其器”，再往前遞推，工欲利其器必先得其器。在進(jìn)行一次 vue 項(xiàng)目的開發(fā)之前，如何將 vue 引入是我們面對(duì)的第一個(gè)問題。
這里我主要介紹兩種引入方式。

傳統(tǒng)的 <script>大法

遙想當(dāng)年，在和jQuery一起玩耍的時(shí)候，在每擼一個(gè)頁面之前，都會(huì)先把jq的cdn路徑放在處于 </body>前的 <script>里面，因?yàn)檫@樣做才可以和她愉快的玩耍。
雖說 jq 和 vue 不是一個(gè)概念（庫 vs 框架），但是基于瀏覽器解析js的原理，兩者可以用相同的方式引入。

npm install

NPM（Node Package Manager）是Node.js自帶的一款包管理工具，只需要簡單的在鍵盤上敲下

就可以將你需要的包安裝至你的項(xiàng)目中，進(jìn)而借助模塊加載器就可以把她們引入到你的文件中。

當(dāng)然，除了npm之外，還有其他的包管理工具，比如 bower 和 yarn，可以根據(jù)個(gè)人喜好進(jìn)行選擇。
不過值得一提的是，yarn 是 Facebook 推出的一款包管理工具，他們的工程師在使用 npm 的時(shí)候發(fā)現(xiàn)了很多需要改進(jìn)的地方，為了達(dá)到預(yù)期的效果，打造了 yarn 這款工具。所以，如果你感興趣，可以試試 yarn。

評(píng)估

對(duì)于上面兩種方式的選擇，你需要權(quán)衡一些因素：

• 如果你是嘗試在已有的項(xiàng)目中添加一點(diǎn)新鮮的血液作為預(yù)研，建議選擇 <script>標(biāo)簽的形式

• 如果你是在從零開始搭建一個(gè) vue 項(xiàng)目，建議選擇用包管理工具的方式

為什么需要構(gòu)建

要回答這個(gè)問題，就要追溯到另外一個(gè)問題：在將代碼發(fā)布到生產(chǎn)環(huán)境之前，我們還需要做什么？
如果能回答好這個(gè)問題，我們就會(huì)知道——到底為什么需要構(gòu)建？
答案可以大致分為以下幾種：

• 預(yù)處理

• 代碼風(fēng)格檢測(cè)

• 資源壓縮

• 靜態(tài)資源替換

因?yàn)楸疚膫?cè)重點(diǎn)的關(guān)系，這里說一下預(yù)處理。
這又是另外一個(gè)問題了——為什么需要預(yù)處理？
因?yàn)闊o時(shí)不刻都在面臨著瀏覽器的兼容問題，比如說ES6，一些語法糖寫起來確實(shí)很爽，但是并不是所有瀏覽器都認(rèn)識(shí)她；再者，React 的 jsx，Vue 的單文件，瀏覽器統(tǒng)統(tǒng)不認(rèn)識(shí)，怎么辦？只能預(yù)處理。
這里推薦 Vue 官方認(rèn)證的好基友—— Webpack（其實(shí)我是gulp粉...）
如果你用的 <script>來引入Vue，不用關(guān)注這個(gè)問題，因?yàn)槟阋呀?jīng)協(xié)助瀏覽器進(jìn)行了“在線編譯”。

組件化

Vue 的 slogan 是：輕量高效的前端組件化方案。
這些年，伴隨著 React 對(duì) Web component 的不斷實(shí)踐與推動(dòng)，組件化的思想被前端er們毫無抵觸的接受，相比 React，個(gè)人認(rèn)為 Vue 對(duì)組件化的解決方案更加優(yōu)雅一些——借助構(gòu)建工具的單文件組件系統(tǒng)。
在一個(gè) .vue文件中，有三個(gè)主標(biāo)簽： <template>,<script>,<style>，分別對(duì)應(yīng)著當(dāng)前組件的結(jié)構(gòu)、交互邏輯和樣式。
口說無憑，舉個(gè)栗子
先來看看 React 的 JSX

其實(shí)看起來也不是多么的不堪，能夠利用完整的 JavaScript 功能來構(gòu)建視圖頁面，也是一件有意義的事情。
相同的業(yè)務(wù)邏輯，用 Vue 來寫

是不是比 React 的 jsx 語法和內(nèi)聯(lián)樣式優(yōu)雅的多呢？
你需要做的就是根據(jù)業(yè)務(wù)邏輯組織好你的 components tree，接著搭配一款模塊化方案，就能實(shí)現(xiàn)一個(gè)基于 Vue 的單文件組件系統(tǒng)啦。
當(dāng)然，Vue 也同樣支持 jsx 語法，你也不必非得采用單文件的組織形式，一切都取決于你的業(yè)務(wù)以及你的團(tuán)隊(duì)。

Vue Object

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始過程。Vue 在這一周期中提供了一些鉤子函數(shù)，這就給我么提供了執(zhí)行自定義邏輯的機(jī)會(huì)。

Vue 是否有“控制器”的概念？
答： 沒有。但是你可以將組件的自定義邏輯分布并實(shí)現(xiàn)在這些鉤子函數(shù)中。

附上一張描述 Vue 對(duì)象生命周期的官方神圖 ↓

做一下簡單的翻譯工作。

beforeCreate

在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)（data observer）和 event/watcher 事件配置之前被調(diào)用。

created

實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。實(shí)例已經(jīng)完成數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算、watch/event事件回調(diào)，但還沒有開始掛載。

beforeMount

在掛載之前被調(diào)用

mounted

掛載之后

beforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在 vdom 重新渲染和打補(bǔ)丁之前。

updated

由于數(shù)據(jù)更改導(dǎo)致的 vdom 重新渲染和打補(bǔ)丁，在這之后調(diào)用。

beforeDestroy

實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

destroyed

實(shí)例銷毀之后調(diào)用。

數(shù)據(jù)流 & 事件流

組裝好了各個(gè)組件，你現(xiàn)在面臨的問題是——如何讓這些東西協(xié)同工作？

Props

props 是定義在子組件中的屬性，用來定義期望從父組件傳入的數(shù)據(jù)（在父組件中向子組件添加 v-bind 綁定屬性即可）。

Event

• 使用 $on()監(jiān)聽事件

• 使用 $emit()觸發(fā)事件

• 使用 $dispatch()派發(fā)事件，沿父鏈冒泡

• 使用 $broadcast()廣播事件，傳導(dǎo)給所有的后代

有時(shí)候，你也許需要一個(gè)幫手—— vuex

當(dāng)應(yīng)用比較龐大，數(shù)據(jù)流和狀態(tài)也會(huì)越發(fā)的難以管理和維護(hù)，這個(gè)時(shí)候你就需要 vuex 了。

21秒精通 Vue.js

接下來從一個(gè)新手司機(jī)的角度，總結(jié)一些可以幫助你快速上手 Vue 的小經(jīng)驗(yàn)。

不要一上來就用 vue-cli

連手槍都沒打過，你一上來就問我要他娘的意大利炮？（一個(gè)出自《亮劍》的梗）

vue-cli 是 Vue 官方推出的一款可以快速構(gòu)建一個(gè) vue app 的腳手架，各項(xiàng)配置也是全到?jīng)]誰了。
但是，作為一個(gè)剛起步的選手，尤其是當(dāng)你一開始要去搞的項(xiàng)目沒那么復(fù)雜，還是不要用 vue-cli 了，原因有以下兩點(diǎn)：

• 如果你像我一樣（對(duì)于構(gòu)建玩的不是特別6），當(dāng)你在 Terminal 按照指引敲擊完幾條命令之后，看著各種配置文件，肯定會(huì)一臉蒙蔽，會(huì)非常打擊你的學(xué)習(xí)熱情。

• 更多的時(shí)候，你的項(xiàng)目可能還不需要用到如此完(yōng)整(zhǒng)的構(gòu)建體系。

所以，自己動(dòng)手搭一個(gè)吧，從最簡單的開始，遲早有一天你也可以寫出一個(gè)100%切合自己項(xiàng)目的腳手架。

你不僅需要ES6教程，還需要.babelrc

你是一個(gè)有理想的 JavaScript 開發(fā)者，你時(shí)刻關(guān)注著這門語言的發(fā)展趨勢(shì)，終于有一天，你深深的迷戀上了ES6，她諸多的新特性都令你為之神往，所以你決定緊隨她的腳步。
但事與愿違，很多瀏覽器在很大程度上并不認(rèn)同這位姑娘，所以你需要作為中間人，讓這些觀念老舊的瀏覽器認(rèn)識(shí)到新時(shí)代的風(fēng)尚——這就是編譯（此案例默認(rèn)為預(yù)編譯）。
通常情況下，我們?cè)跇?gòu)建工具中引入 babel對(duì)自己的腳本進(jìn)行語法上的轉(zhuǎn)換，實(shí)現(xiàn)向后兼容。
比如在 webpack.config.js中引入這樣的規(guī)則：

事實(shí)證明，在大多數(shù)情況下，這樣是ok的。
但，當(dāng)我們的項(xiàng)目是借助構(gòu)建工具實(shí)現(xiàn)的單文件組件系統(tǒng)時(shí)，我們的 JavaScript 都寫在了 .vue文件中，所以當(dāng)你編譯之后會(huì)得到一堆錯(cuò)誤，這些錯(cuò)誤都是在你使用ES6語法的地方出現(xiàn)的。
這是因?yàn)槲覀冇?vue-loader去處理 .vue文件，這本身沒錯(cuò)。但是， vue-loader用到了 babel-loader，卻沒有配置 babel-loader的地方，所以呢，gg。
查看官方文檔，就會(huì)找到解決辦法。

“babel-loader respects .babelrc, so it is the recommended approach to configure the Babel presets and plugins.”

參加這里。
綜上，把 babel 相關(guān)配置放到 .babelrc 文件中去。

使用組建之前先注冊(cè)

想上車？先買票！

組件 (Components) 是 Vue.js 最強(qiáng)大的功能之一。

如果你沒有使用那個(gè)單文件組件系統(tǒng)，在使用組件的時(shí)候，你要這么做 ↓ （注冊(cè)一個(gè)全局組件， Vue.component(tagName,options)）

組件在注冊(cè)之后，便可以在父實(shí)例的模塊中以自定義元素 <mu-component></my-component>的形式使用。
要確保在初始化根實(shí)例之前注冊(cè)了組件：

你也可以通過使用組件實(shí)例選項(xiàng)注冊(cè)，可以使組件僅在另一個(gè)實(shí)例/組件的作用域中可用，這也是單文件組件系統(tǒng)的注冊(cè)方式，即局部注冊(cè)。
官方文檔寫的已經(jīng)非常詳細(xì)了，如果你仍然對(duì)這里有疑慮，給你一個(gè)傳送門。

父子組件是怎么協(xié)同工作的？

父子組件的關(guān)系可以總結(jié)為 props down, events up。
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。
這就好比，老子給兒子生活費(fèi)（props），兒子一有事就告訴老子：“爸，我沒錢了”、“爸，有人打我”、“爸，我餓了”（events）。