什么是vue?
vue就是一個(gè)漸進(jìn)式的JS框架。主要作用就是動(dòng)態(tài)構(gòu)建用戶(hù)界面。
? ? 漸進(jìn)式是什么意思呢？
? ? vue的核心功能就是一個(gè)視圖模板引擎，包含聲明式渲染以及組件系統(tǒng)。在核心部件的基礎(chǔ)上添加客戶(hù)端路由、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架，下圖就是vue包含的所有部件。這些功能是相互獨(dú)立的，可以在核心部件基礎(chǔ)上選擇任意你所需要的部件。這也就是‘漸進(jìn)式’的概念。
? ?開(kāi)發(fā)出vue的作者叫尤雨溪（Evan You）是一個(gè)華裔，使得vue很熱的原因還有一個(gè)就是vue的中文文檔寫(xiě)得很好，簡(jiǎn)單易懂。有興趣可以去百科看一下他的簡(jiǎn)介---------鏈接：?https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470
? ? 那么，vue是因何由來(lái)的？學(xué)習(xí)前端的同學(xué)就算沒(méi)接觸過(guò)Angular和React，也一定聽(tīng)說(shuō)過(guò)，vue和Angular還有React有一定交集。
? ?Vue集這兩者的優(yōu)點(diǎn)于一身，它具有Angular的模板語(yǔ)法和數(shù)據(jù)綁定的特性，雖然Angualr的功能齊全，但是上手有點(diǎn)難，Vue上手容易，而且它的中文文檔寫(xiě)的很好，適合學(xué)習(xí)。還有，Vue還具有React的組件化和虛擬Dom的特性，雖然Vue和React上手難易程度差不多，但是vue比react的性能會(huì)好點(diǎn)。
? ? 顯而易見(jiàn)，vue的特點(diǎn)也就是它的由來(lái)，并且vue遵循MVVM模式。
? ? 上圖便是MVVM模式的示意圖，分為三個(gè)部分：View(DOM)層、Model（JS邏輯層）以及ViewModel(Vue)層。
其中，在viewmodel層中包含兩個(gè)類(lèi)似監(jiān)聽(tīng)器的部件，DOM Listeners和Data Bindings，當(dāng)View層的數(shù)據(jù)狀態(tài)發(fā)生改變時(shí)，那么Dom Listeners
會(huì)監(jiān)聽(tīng)Model層并改變Model層的數(shù)據(jù)。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)，ViewModel層的Data Bindings監(jiān)聽(tīng)并改變View層數(shù)據(jù)的顯示。這也就是vue的一個(gè)特性：數(shù)據(jù)的雙向綁定。
? ? Vue的實(shí)例
? ? 上圖所示為vue的簡(jiǎn)單實(shí)例。其中el表示Vue需要操作的區(qū)域范圍。'#example'表示操作id為example元素下的范圍。
data表示vue實(shí)例的數(shù)據(jù)對(duì)象，data的屬性可以響應(yīng)數(shù)據(jù)的變化。created表示實(shí)例生命周期中創(chuàng)建完成的那一步，當(dāng)實(shí)例已經(jīng)創(chuàng)建完成之后將調(diào)用其方法。
? ? Vue的常用指令：
vue技術(shù)棧
? 上邊的vue.js可以直接在一個(gè)html頁(yè)面里通過(guò)引入Vue.js來(lái)直接寫(xiě)Vue代碼，但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大，項(xiàng)目中會(huì)存在很多頁(yè)面，一旦每個(gè)頁(yè)面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例，這樣非常不利于后期的維護(hù)和代碼的公用，也會(huì)存在實(shí)例名沖突的情況，所以我們需要用到Vue提供的技術(shù)棧來(lái)構(gòu)建強(qiáng)大的前端項(xiàng)目。
除了Vue.js還需要用到：
（1）vue-cli：Vue的腳手架工具，用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。
（2）vue-router： Vue提供的前端路由工具，利用其我們實(shí)現(xiàn)頁(yè)面的路由控制，局部刷新及按需加載，構(gòu)建單頁(yè)應(yīng)用，實(shí)現(xiàn)前后端分離。
（3）vuex：Vue提供的狀態(tài)管理工具，用于統(tǒng)一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象。
（4）ES6：Javascript的新版本，ECMAScript6的簡(jiǎn)稱(chēng)。利用ES6我們可以簡(jiǎn)化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來(lái)快速實(shí)現(xiàn)JS邏輯。
（5）NPM：node.js的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開(kāi)發(fā)和維護(hù)。
（6）webpack：一款強(qiáng)大的文件打包工具，可以將我們的前端項(xiàng)目文件同一打包壓縮至js中，并且可以通過(guò)vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載。
（7）Babel：一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件
? 利用以上等技術(shù)，我們便可以開(kāi)始構(gòu)建我們的Vue項(xiàng)目了。
vue-cli構(gòu)建
單文件組件
在剛剛構(gòu)建好的vue項(xiàng)目中，有一個(gè)App.vue和Hello.vue的文件，那么像這樣的以.vue后綴結(jié)尾的文件便是我們Vue項(xiàng)目中常見(jiàn)的單文件組件。單文件組件包含了一個(gè)功能或模塊的html、js及css。在.vue文件中，我們可以在template標(biāo)簽中寫(xiě)html，在script標(biāo)簽中寫(xiě)js，在style標(biāo)簽中寫(xiě)css。這樣一個(gè)功能或模塊就是一個(gè).vue組件，對(duì)于組件公用和后期的維護(hù)也非常便捷。
父子組件通信
? 那么像這樣在以單文件組件為核心的項(xiàng)目開(kāi)發(fā)中，我們一定會(huì)想到一個(gè)問(wèn)題，就是.vue父子組件之間是如何交換數(shù)據(jù)來(lái)實(shí)現(xiàn)通信的呢？在Vue2.0中提供了props來(lái)實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)，通過(guò)$emit來(lái)實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)。當(dāng)然如果是較為復(fù)雜和普遍的數(shù)據(jù)交互，建議大家使用vuex來(lái)同一管理數(shù)據(jù)。
使用props向子組件傳遞數(shù)據(jù)
props 是指注冊(cè)在組件選項(xiàng)上的自定義屬性.當(dāng)一個(gè)值，被放置在 props 中，作為其中一個(gè) prop，這個(gè)值就會(huì)成為組件實(shí)例上的一個(gè)可訪(fǎng)問(wèn)的屬性。
使用events向父組件發(fā)送消息
在開(kāi)發(fā)?<blog-post>?組件時(shí)，有些功能可能恰好與 props 相反，需要子組件反過(guò)來(lái)和父組件進(jìn)行通信。
?添加能放大文章文本字號(hào)的輔助功能
使用events向父組件發(fā)送消息
在開(kāi)發(fā)?<blog-post>?組件時(shí)，有些功能可能恰好與 props 相反，需要子組件反過(guò)來(lái)和父組件進(jìn)行通信。
?添加能放大文章文本字號(hào)的輔助功能>>>>內(nèi)容前面添加一個(gè)可以加大文本字號(hào)的按鈕
當(dāng)點(diǎn)擊 button 時(shí)，需要和父組件通信，告知它加大所有文章的文本字號(hào)。Vue 實(shí)例為我們提供了一個(gè)自定義事件(custom event)系統(tǒng)，來(lái)解決這個(gè)問(wèn)題。想要向父組件發(fā)送事件，我們可以調(diào)用實(shí)例中內(nèi)置的?$emit?方法，傳遞事件名稱(chēng)。然后在博客文章組件上，可以通過(guò)?v-on?監(jiān)聽(tīng)這個(gè)事件，就如同使用原生 DOM 事件一樣：
插件使用
全局使用：
1、index.html 引入。這樣的方式不推薦使用，因?yàn)榇嬖谙群蠹虞d順序的問(wèn)題，有些插件不支持這一方式。
2、通過(guò)webpack配置文件引入。主要通過(guò)plugin配置項(xiàng)webpack.ProvidePlugin()方法實(shí)現(xiàn)，不過(guò)只適合支持CommonJs規(guī)范并提供一個(gè)全局變量的插件，如jQuery中的$。
3、import + vue.use()引入。這種方式需要在全局.vue文件中import需要加載的插件，然后通過(guò)Vue.use('插件變量名')來(lái)實(shí)現(xiàn)，不過(guò)此方法只支持遵循Vue.js插件編寫(xiě)規(guī)范的插件使用，如vue-resourece。
單文件使用：
1、通過(guò)import直接引入。這種方式可以在需要調(diào)用插件的.vue文件中使用，不過(guò)需要注意和實(shí)例的創(chuàng)建順序問(wèn)題，或者也可以通過(guò)require引入
2、import + components注冊(cè)。此方式為Vue組件的使用方式，可以在一個(gè)組件中注冊(cè)并使用一個(gè)子組件。
