Vue.js新手入門指南
最近在逛各大網(wǎng)站，論壇联四，以及像SegmentFault等編程問答社區(qū)撑碴，發(fā)現(xiàn)Vue.js異常火爆朝墩，重復性的提問和內(nèi)容也很多醉拓，樓主自己也趁著這個大前端的熱潮，著手學習了一段時間的Vue.js收苏，目前用它正在做自己的結(jié)業(yè)項目亿卤。
在做的過程中也對Vue.js的官方文檔以及其各種特性有了許多認識。作為一個之前以PHP+模版引擎為主的開發(fā)鹿霸，從一個從未接觸過除HTML+CSS+JavaScript+JQuery以外的前端技術(shù)的人到現(xiàn)在可以獨立使用Vue.js以及各種附屬的UI庫來開發(fā)項目排吴，我總結(jié)了一些知識和經(jīng)驗想與大家分享。
下面我就以問答的形式來分享吧懦鼠。這里假設(shè)你僅僅只掌握了HTML+CSS+JavaScript钻哩，如果你對JQuery這個前端庫屹堰，以及各種后端模版語言比如說PHP，JSP還有所了解并且使用過的話那就太好了街氢。
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進式框架。與其他重量級框架不同的是珊肃，Vue 采用自底向上增量開發(fā)的設(shè)計荣刑。Vue 的核心庫只關(guān)注視圖層，并且非常容易學習近范，非常容易與其它庫或已有項目整合。另一方面延蟹，Vue 完全有能力驅(qū)動采用單文件組件和?Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應(yīng)用评矩。
Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
如果你是有經(jīng)驗的前端開發(fā)者阱飘，想知道 Vue.js 與其它庫/框架的區(qū)別斥杜，查看對比其它框架。
這是官網(wǎng)的介紹沥匈，是不是覺得非常的抽象非常的官方蔗喂？看完之后可能還是有很多人不是很懂這個框架到底是用來做什么的，什么是“漸進式框架”高帖？什么是“自底向上增量開發(fā)”缰儿？什么是“視圖層”？什么是“單文件組件”散址？什么是“復雜的單頁應(yīng)用乖阵？”第二段話里面“響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件”這又是個啥？還有最后一段話预麸，“Vue.js 與其它庫/框架的區(qū)別”究竟是什么瞪浸？
不要擔心，如果你慢慢看完這里面的所有問答吏祸，一定會對前面那些可能你從未聽說過的專業(yè)術(shù)語有一種恍然大悟的感覺对蒲。
想必現(xiàn)在能看到我這篇文章的人贡翘，都是用著APP或者網(wǎng)頁版知乎在閱讀把蹈矮。Vue.js就是一個用于搭建類似于網(wǎng)頁版知乎這種表單項繁多，且內(nèi)容需要根據(jù)用戶的操作進行修改的網(wǎng)頁版應(yīng)用鸣驱。
顧名思義含滴，單頁應(yīng)用一般指的就是一個頁面就是應(yīng)用，當然也可以是一個子應(yīng)用丐巫，比如說知乎的一個頁面就可以視為一個子應(yīng)用谈况。單頁應(yīng)用程序中一般交互處理非常多勺美，而且頁面中的內(nèi)容需要根據(jù)用戶的操作動態(tài)變化。
4.你前面說的網(wǎng)頁版知乎我也可以用JQuery寫啊碑韵，為什么要用Vue.js呢赡茸？
講到JQuery，就不得不說到JavaScript的DOM操作了祝闻。如果你用JQuery來開發(fā)一個知乎占卧，那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了。
現(xiàn)在我們把一個網(wǎng)頁應(yīng)用抽象一下联喘，那么HTML中的DOM其實就是視圖华蜒，一個網(wǎng)頁就是通過DOM的組合與嵌套，形成了最基本的視圖結(jié)構(gòu)豁遭，再通過CSS的修飾叭喜，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀。最后涉及到交互部分蓖谢，就需要用到JavaScript來接受用戶的交互請求捂蕴，并且通過事件機制來響應(yīng)用戶的交互操作，并且在事件的處理函數(shù)中進行各種數(shù)據(jù)的修改闪幽，比如說修改某個DOM中的innerHTML或者innerText部分啥辨。
我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做視圖層盯腌。
Vue 的核心庫只關(guān)注視圖層
我們?yōu)槭裁匆岩晥D層抽取出來并且單獨去關(guān)注它呢溉知？
因為在像知乎這種頁面元素非常多，結(jié)構(gòu)很龐大的網(wǎng)頁中腕够，數(shù)據(jù)和視圖如果全部混雜在一起着倾，像傳統(tǒng)開發(fā)一樣全部混合在HTML中，那么要對它們進行處理會十分的費勁燕少，并且如果其中有幾個結(jié)構(gòu)之間存在藕斷絲連的關(guān)系卡者，那么會導致代碼上出現(xiàn)更大的問題，這什么問題呢客们？
你是否還記得你當初寫JQuery的時候崇决，有$('#xxx').parent().parent().parent()這種代碼呢？當你第一次寫的時候底挫，你覺得頁面元素不多恒傻，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在注釋里面寫清楚這個元素的爸爸的爸爸的爸爸不就好了建邓。但是萬一過幾天之后你的項目組長或者你的產(chǎn)品經(jīng)理突然對你做的網(wǎng)頁提出修改要求盈厘，這個修改要求將會影響頁面的結(jié)構(gòu)，也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變官边，那么$('#xxx').parent().parent().parent()可能就會變成
$('#xxx').parent().parent().parent().parent().parent()了沸手。
這還不算什么外遇，等以后產(chǎn)品迭代越來越快，修改越來越多契吉，而且頁面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個跳仿，那么修改起來將非常費勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的捐晶，可能到時候打開這個頁面菲语，會變得越來越卡，而你卻無從下手惑灵。
當你在編寫項目的時候遇到了這種問題山上，你一定會抱怨，為什么世上會有HTML這種像盜夢空間一樣的需要無數(shù)div嵌套才能做出頁面的語言英支，為什么當初學JQuery看中的是它簡潔的DOM操作佩憾，現(xiàn)在卻一點也不覺得它有多簡潔，難道我學的是假的JQuery潭辈？為什么寫個代碼這么難鸯屿，你想砸電腦澈吨，你想一鍵盤拍在產(chǎn)品狗的腦袋上把敢，責怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長。
這個時候如果你學過Vue.js谅辣，那么這些抱怨將不復存在修赞。
5.Vue.js為什么能讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來這么方便？
因為Vue.js有聲明式桑阶，響應(yīng)式的數(shù)據(jù)綁定柏副，與組件化的開發(fā)，并且還使用了Virtual DOM這個看名字就覺得高大上的技術(shù)蚣录。
可是這些名詞都是啥割择？
這里的響應(yīng)式不是@media 媒體查詢中的響應(yīng)式布局，而是指vue.js會自動對頁面中某些數(shù)據(jù)的變化做出響應(yīng)萎河。至于是如何響應(yīng)的荔泳，大家可以先把下面這段代碼隨便粘貼到一個擴展名為html的文件然后用瀏覽器打開，隨便在文本框里面輸入一些文字虐杯，觀察一下頁面變化玛歌。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" placeholder="在這里輸入文字，下面會跟著變化" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
? el: '#app',
? data: {
? ? message: 'Hello Vue!'
? }
})
</script>
</body>
</html>
是不是會發(fā)現(xiàn)一個很神奇的現(xiàn)象贝室，文本框里面輸入的文字和后面的p標簽中的內(nèi)容一起變化娇掏？
換句話說浙踢，p標簽里面通過{{ message }}這個寫法與input標簽中的value綁定在了一起，其中變化值朋，另外一個和它綁定的數(shù)據(jù)就跟著變化叹侄。
結(jié)合標題來說，就是vue.js會自動響應(yīng)數(shù)據(jù)的變化情況吞歼，并且根據(jù)用戶在代碼中預先寫好的綁定關(guān)系圈膏，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改。而這種綁定關(guān)系篙骡，在圖上是以input 標簽的v-model屬性來聲明的稽坤，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
還記得在傳統(tǒng)前端開發(fā)的時候糯俗，我們都是每個人做一個頁面尿褪，然后最后套入各種后端模版引擎，比如說PHP的Smarty或者Java的JSP等等得湘。
但是現(xiàn)在我們做單頁應(yīng)用杖玲，頁面交互和結(jié)構(gòu)十分復雜，一個頁面上就有許許多多的模塊需要編寫淘正，而且往往一個模塊的代碼量和工作量就非常龐大摆马，如果還按照原先的方法來開發(fā)，那么會累死人鸿吆。而且遇到以后的產(chǎn)品需求變更囤采，修改起來也非常麻煩，生怕動了其中一個div之后惩淳，其他div跟著雪崩蕉毯，整個頁面全部亂套，或者由于JavaScript的事件冒泡機制思犁，導致修改一些內(nèi)層的DOM事件處理函數(shù)之后代虾，出現(xiàn)各種莫名其妙的詭異BUG。
在面向?qū)ο缶幊讨屑ざ祝覀兛梢允褂妹嫦驅(qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個大的業(yè)務(wù)模塊拆分成更多更小的幾個類棉磨。在面向過程編程中，我們也可以把一些大功能拆分成許多函數(shù)学辱，然后分配給不同的人來開發(fā)乘瓤。
在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢项郊？這就引入了組件化開發(fā)的思想馅扣。
Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中着降，我們只要先在父級應(yīng)用中寫好各種組件標簽（占坑）差油，并且在組件標簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實現(xiàn)（填坑）蓄喇，然后整個應(yīng)用就算做完了发侵。
現(xiàn)在的網(wǎng)速越來越快了，很多人家里都是幾十甚至上百M的光纖妆偏，手機也是4G起步了刃鳄，按道理一個網(wǎng)頁才幾百K，而且瀏覽器本身還會緩存很多資源文件钱骂，那么幾十M的光纖為什么打開一個之前已經(jīng)打開過叔锐，已經(jīng)有緩存的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有性能瓶頸的见秽，尤其是在傳統(tǒng)開發(fā)中愉烙，用JQuery或者原生的JavaScript DOM操作函數(shù)對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹解取，導致頁面看起來非巢皆穑卡頓。
而Virtual DOM則是虛擬DOM的英文禀苦，簡單來說蔓肯，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化振乏，由于這個DOM操作屬于預處理操作蔗包，并沒有真實的操作DOM，所以叫做虛擬DOM昆码。最后在計算完畢才真正將DOM操作提交气忠，將DOM操作變化反映到DOM樹上邻储。
對于vue.js的Virtual DOM赋咽，目前業(yè)界有著褒貶不一的評價。有人認為Vue.js作為一個輕量級框架吨娜，引入Virtual DOM會加大Vue.js本身的代碼尺寸脓匿，也會消耗更多CPU（手機上會更耗電）（注意：消耗更多的CPU并不意味著會更卡，因為JavaScript計算是后臺計算宦赠，他的計算量還不至于讓DOM操作變得卡頓）陪毡，并且在操作單個DOM元素的時候，反而多了一道計算工序勾扭，會更慢毡琉。但也有人認為基本上會用Vue.js開發(fā)的都是頁面中內(nèi)容很多的元素，肯定操作的DOM量級普遍較大妙色，平均一下還是比較劃算的桅滋。
9.我到底該怎么用Vue.js做單頁應(yīng)用開發(fā)？
說了這么多，我還是不知道怎么用它做出一個像知乎那樣的頁面啊丐谋，到底怎么學它呢芍碧？
前面我們看了一個響應(yīng)式的數(shù)據(jù)綁定案例，那只是一個DEMO号俐，而且也看不出有什么實際意義泌豆，離真正的單頁應(yīng)用程序還差得遠，到底怎么用它開發(fā)真實的項目呢吏饿？
我的建議是踪危，先把介紹 -?vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍。除了組件這個小節(jié)涉及到了很多晦澀難懂的名詞以外猪落，前面幾章完全就是把Vue.js當作一個模版引擎來用陨倡。
然后開始學習ECMAScript6，Webpack许布，NPM以及Vue-Cli的基本用法兴革，最好對Node.js也要有所了解。
最后組件部分先大致看一遍蜜唾，了解組件里面都有哪些概念之后杂曲，開始看網(wǎng)上各種實戰(zhàn)視頻以及文章還有別人開源的源代碼。
10.在前面你提到過好幾次ECMAScript袁余，這是啥擎勘？
ECMAScript聽名字好像和JavaScript很像，難不成他們有什么千絲萬縷的聯(lián)系颖榜？
沒錯你猜對了棚饵，他們之間還真有著很深的聯(lián)系。
引用阮一峰老師的話：（ECMAScript 6入門）
要講清楚這個問題掩完，需要回顧歷史噪漾。1996年11月，JavaScript 的創(chuàng)造者 Netscape 公司且蓬，決定將 JavaScript 提交給國際標準化組織ECMA欣硼，希望這種語言能夠成為國際標準。次年恶阴，ECMA 發(fā)布262號標準文件（ECMA-262）的第一版诈胜，規(guī)定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript冯事，這個版本就是1.0版焦匈。
該標準從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript昵仅，有兩個原因缓熟。一是商標，Java 是 Sun 公司的商標，根據(jù)授權(quán)協(xié)議荚虚，只有 Netscape 公司可以合法地使用 JavaScript 這個名字薛夜，且 JavaScript 本身也已經(jīng)被 Netscape 公司注冊為商標。二是想體現(xiàn)這門語言的制定者是 ECMA版述，不是 Netscape梯澜，這樣有利于保證這門語言的開放性和中立性。
因此渴析，ECMAScript 和 JavaScript 的關(guān)系是晚伙，前者是后者的規(guī)格，后者是前者的一種實現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）俭茧。日常場合咆疗，這兩個詞是可以互換的。
而ECMAScript6就是新一代的JavaScript語言母债。
這里也強烈推薦大家學習ECMAScript6的時候參考這本書ECMAScript 6入門
11.我在學習Vue.js的時候老是聽到Webpack午磁，這是啥？
Webpack是一個前端打包和構(gòu)建工具毡们。如果你之前一直是手寫HTML迅皇，CSS，JavaScript衙熔，并且通過link標簽將CSS引入你的HTML文件登颓，以及通過Script標簽的src屬性引入外部的JS腳本，那么你肯定會對這個工具感到陌生红氯。不要緊框咙，我們先來了解一下為什么要用Webpack，然后帶著原因去學習就好了痢甘。
前面說了喇嘱，做一個單頁應(yīng)用程序本身就相當復雜，而且在做的時候肯定會使用到很多素材和別的第三方庫产阱，我們該如何去管理這些東西呢婉称？
還有前面講到了Webpack是一個前端打包工具块仆，前端代碼為什么要打包呢构蹬？因為單頁應(yīng)用程序中用到很多素材，如果每一個素材都通過在HTML中以src屬性或者link來引入悔据，那么請求一個頁面的時候庄敛，可能瀏覽器就要發(fā)起十多次請求，往往請求的這些資源都是一些腳本代碼或者很小的圖片科汗，這些資源本身才幾k藻烤，下載連1秒都不需要，但是由于HTTP是應(yīng)用層協(xié)議，它的下層是TCP這個運輸層協(xié)議怖亭，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長涎显，所以需要把這些小文件全部打包成一個文件，這樣只要一次TCP握手和揮手的過程兴猩，就把多個資源給下載下來了期吓，并且多個資源由于都是共享一個HTTP請求，所以head等部分也是共享的倾芝，相當于形成了規(guī)模效應(yīng)讨勤，讓網(wǎng)頁展現(xiàn)更快，用戶體驗更好晨另。
前面說到Webpack還有構(gòu)建的功能潭千，這就不得不提到了ECMAScript6這個新版本的JavaScript，但是現(xiàn)在國內(nèi)外還有很多人用著老版本的瀏覽器借尿，這些瀏覽器并不支持ECMAScript6刨晴，那么我們的前端項目如何在這種瀏覽器上運行呢？這就需要Webpack的Loader自動載入一個轉(zhuǎn)換器來將我們寫的ECMAScript6轉(zhuǎn)換成瀏覽器能支持的老版本JavaScript語言路翻，這個轉(zhuǎn)換器的名字叫做babel割捅，如果你以后聽到或者看到了這個單詞，應(yīng)該要知道它就是一個ECMAScript6 to 老版本JavaScript的轉(zhuǎn)換器了帚桩。這也是Webpack的構(gòu)建功能亿驾。當然對前端有更深入的同學還會知道Sass，Less账嚎，stylus之類的CSS預處理器莫瞬，我們也可以通過在Loader中編寫特定的規(guī)則來實現(xiàn)自動將這些CSS預處理語言轉(zhuǎn)換成普通瀏覽器能識別的CSS代碼。
開頭的介紹提到了vue.js可以使用單文件組件開發(fā)項目郭蕉，其實也是通過Webpack將單文件組件中的模版疼邀，樣式以及JS轉(zhuǎn)換到主頁面中
當然Webpack不止這點功能，它還可以通過安裝各種插件來擴展召锈，比如說熱加載技術(shù)旁振，就是解放鍵盤的F5鍵。讓我們修改代碼涨岁，并且按Ctrl+S保存之后拐袜，瀏覽器頁面自動刷新變化，不需要我們?nèi)ナ謩铀⑿律倚剑€有一些插件可以自動添加注釋蹬铺，自動給CSS代碼加上一些瀏覽器內(nèi)核對CSS3兼容前綴，就像webkit-xxx之類的一樣秉撇。
13.NPM和Node.js又是什么甜攀？它們是什么關(guān)系秋泄？
首先講講Node.js。我們知道通常情況下规阀，JavaScript的運行環(huán)境都是瀏覽器恒序，因此JavaScript的能力也就局限于瀏覽器能賦予它的權(quán)限了。比如說讀寫本地系統(tǒng)文件這種操作谁撼，一般情況下運行在瀏覽器中的JavaScript代碼是沒有這個操作權(quán)限的奸焙。如果我們想用JavaScript寫出一些能夠運行在操作系統(tǒng)上的，能夠具有像PHP彤敛，JAVA之類的編程語言具有的功能的程序該怎么辦呢与帆？Node.js就解決了這個問題。Node.js是一個服務(wù)端的JavaScript運行環(huán)境墨榄，通過Node.js可以實現(xiàn)用JavaScript寫?yīng)毩⒊绦蛐恪Ｏ裎覀冎疤岬降腤ebpack就是Node.js寫的，所以作為一個前端開發(fā)袄秩，即使你不用Node.js寫?yīng)毩⒊绦蛘篝幔驳门湟粋€Node.js運行環(huán)境，畢竟很多前端工具都是使用它寫的之剧。
NPM是一個node.js的包管理器郭卫。我們在傳統(tǒng)開發(fā)的時候，JQuery.js大多都是百度搜索背稼，然后去官網(wǎng)下載贰军，或者直接引入CDN資源，這種方法太過于麻煩蟹肘。如果以后遇到其他的包词疼，這個包的代碼本身可能還調(diào)用了其他的包（也稱這個包和其他的那幾個包存在依賴關(guān)系），那么我們要在自己的項目中引入一個包將變得十分困難×备梗現(xiàn)在我們有了NPM這個包管理器贰盗，直接可以通過
?npm install xxx包名??
?的方式引入它，比如說
npm install vue? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?就自動在當前項目文件夾下導入了這個包阳欲，并且npm自動下載好了vue這個包依賴的其他包舵盈。
至于有的人在按照網(wǎng)上的npm教程配置的時候踩坑了，發(fā)現(xiàn)下載速度很慢或者完全下載不了球化，那是因為我國有著眾所周知的原因秽晚，網(wǎng)上也有各種解決方法可以解決這個問題，大家多善用搜索引擎赊窥。
前面提到了Webpack可以安裝各種插件來擴展功能爆惧，其實也是通過這種方式擴展。
如果你學過PHP的話锨能，NPM就和PHP里面的Composer差不多扯再。也和CentOS下的yum和Ubuntu下的apt-get差不多。
它是一個vue.js的腳手架工具熄阻。說白了就是一個自動幫你生成好項目目錄，配置好Webpack倔约，以及各種依賴包的工具秃殉，它可以通過
npm install vue-cli -g
的方式安裝，后面的-g表示全局安裝的意思浸剩，意味著你可以打開命令行之后直接通過vue命令調(diào)用它钾军。
現(xiàn)在Vue.js無論是發(fā)展勢頭還是作者支持還是很好的绢要，而且它本身中文資料就比較多吏恭，教程也很多重罪，現(xiàn)在隨隨便便打開幾個和前端開發(fā)有關(guān)的知乎專欄，基本上都能見到相關(guān)文章剿配，社區(qū)也很活躍。
至于你該不該學呼胚，取決于你自己，如果你當前只是做做以內(nèi)容展示為主的項目蝇更，或者就是成天用各種CMS建站仿站，并且以后都不打算更換更好的工作簿寂，那么可以暫時不用學漾抬。如果你開發(fā)的項目交互非常多，而且前后端開發(fā)都對前后端分離有很清楚的認識常遂，那么可以大膽的學習纳令，并且在實際項目中運用。
關(guān)于這個問題平绩，網(wǎng)上說法很多，我自己認為主要還是前些年大前端變革太快漠另，而最近一年開始Vue.js+Webpack這個組合開始逐漸穩(wěn)定下來了捏雌，而且已經(jīng)有了很多中文資料。
對比它的競爭對手AngularJS笆搓，新舊版本項目無法平滑升級性湿，變革太大讓用戶感覺不安穩(wěn)纬傲。
而React本身主流推薦用的是JSX，需要額外學習一門語法（什么肤频？學Vue.js還要學ECMAScript6叹括？現(xiàn)在ECMAScript6是趨勢，并不是因為Vue.js才要學的）宵荒，并且React本身用的是render寫法編寫模版代碼汁雷，這讓很多用習慣了Smarty等后端模版引擎得人來使用感覺很不適應(yīng)，現(xiàn)在看來React本身在中國一些論壇社區(qū)的火爆程度還是沒有Vue.js高报咳。
當然也并不是說除了Vue.js以外其他框架都很差侠讯。像知乎新版也是用React開發(fā)的，他還是有各自優(yōu)秀的地方大家可以深入學習之后做出自己的判斷暑刃。
17.我在很多地方還看到Vuex和Vue-route厢漩，它們又是什么？
Vuex是vue的一個狀態(tài)管理器稍走。用于集中管理一個單頁應(yīng)用程序中的各種狀態(tài)袁翁。
Vue-route是vue的一個前端路由器，這個路由器不是我們上網(wǎng)用的路由器婿脸，而是一個管理請求入口和頁面映射關(guān)系的東西粱胜。它可以實現(xiàn)對頁面局部進行無刷新的替換，讓用戶感覺就像切換到了網(wǎng)頁一樣狐树。
要講清楚這兩個東西焙压，又得花費大量篇幅，所以這里只是簡單提一下抑钟，先學好vue.js本身才是最重要的。
18.我還在一些地方看到過Vue-resource和Axios在塔，它們又是什么蛔溃？
我們在傳統(tǒng)的前后端不分離的開發(fā)中贺待，后端直接把數(shù)據(jù)通過模版引擎拼接進了返回的HTML中麸塞。而現(xiàn)在做單頁應(yīng)用程序?qū)儆谇昂蠖朔蛛x開發(fā)哪工，那么這個單頁應(yīng)用程序中的數(shù)據(jù)就得通過ajax的方式獲取，也要通過ajax的方式提交到后端得院。
在傳統(tǒng)開發(fā)中我們都是通過xmlhttprequest手動操作祥绞，或者通過JQuery的ajax方法來進行數(shù)據(jù)提交獲取蜕径。
vue.js本身沒有封裝ajax操作庫兜喻，所以我們要通過Vue-resource和Axios來進行ajax操作朴皆，而因為種種原因遂铡，現(xiàn)在vue.js2.0已經(jīng)將axios作為官方推薦的ajax庫了扒接。
? ? ? ? 前端開發(fā)基本上不需要太高端的電腦都能勝任宗侦，現(xiàn)在這個時代是臺電腦矾利，裝個編輯器都可以做前端開發(fā)的梦皮。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Vue.js的組件文件本質(zhì)上還是普通的代碼文件剑肯，所以各種編輯器配合一些語法檢查插件就足夠了让网。我自己用的是sublime text 3，安裝一些插件之后可以實現(xiàn).vue單文件組件高亮代碼以及各種自動完成而账。Webstorm中也有類似插件泞辐，大家可以在網(wǎng)上各種教學文章的指導下配置好環(huán)境咐吼。? ? ? ? ? ? ? ? ? ? ? ? ? ? 我用的主題是Monokai锯茄，這個主題在大部分顯示器下長時間觀看眼睛不會很疼肌幽。我使用的顯示器是LG IPS236喂急，部分顯示器有亮度色標調(diào)節(jié)琅关，我這款顯示器調(diào)到2.0左右會比較舒適涣易，過低會導致底部的茶色背景變黑新症，反差較大更加疲勞徒爹，過高會導致對比度不足隆嗅，畫面泛白影響調(diào)色胖喳。
