資訊專欄INFORMATION COLUMN
摘要：今年以來，的文檔更新很快完善社區(qū)也日漸狀大，再加上于某廠你懂的大力的推廣，的前景十分光明。一般情況下，中小型的系統(tǒng)從遷移到版本大概只需要天的時(shí)間?？烊?dòng)手嘗試吧原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。
作者：曉飛（滬江Web前端開發(fā)工程師）
本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處
Vue.js框架已經(jīng)火了好長一段時(shí)間了，早在2015年的雙11中，淘寶的部分導(dǎo)購業(yè)務(wù)——如：雙十一晚會(huì)搖一搖清單、我的雙十一標(biāo)簽進(jìn)入的人群會(huì)場(chǎng)尋找與自身匹配的商品。今年以來，vue的文檔更新很快完善、社區(qū)也日漸狀大，再加上于某廠（你懂的）大力的推廣，vue的前景十分光明。本文目的：通過這篇文章了解一些vue的基本概念以及如何在實(shí)際編碼中使用vue，文末有demo的倉庫地址，大家可以clone后，本地查看、運(yùn)行一下。
文章開始，先比較一下vue和react。先說它們的相似之處：
使用 Virtual DOM，提供了響應(yīng)式編程和組件化的視圖組件；
不同于angualr的大而全，vue、react將注意力集中保持在核心庫，如果如果你需要用到其他的話，可以在社區(qū)中尋找或者自己開發(fā)一個(gè)，如vue-router（路由）和vuex(負(fù)責(zé)處理全局狀態(tài)管理的庫)；
然后是不同之處：
性能：據(jù)vue.js官網(wǎng)聲稱vue的性能在某些場(chǎng)景下是優(yōu)于react的——渲染性能 10,000 個(gè)列表項(xiàng) 100 次，vue較之react平均快100ms；Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀，因此在開發(fā)類似動(dòng)畫這樣的應(yīng)用時(shí)，vue.js更占優(yōu)勢(shì)；
html模板綁定：react使用JSX，vue也支持JSX，但建議使用其內(nèi)置的模板引擎，也可以使用Jade。JSX的不足在于：當(dāng)綁定頁面用到if判斷、循環(huán)時(shí)，jsx的語法讓代碼看起來很混亂、也不直觀；當(dāng)然，jsx也有自己的優(yōu)勢(shì)——支持linting等檢查；
CSS： vue通過在DOM上增加scoped，就可以實(shí)現(xiàn)CSS Modules的功能；
React相比Vue也有自己的優(yōu)勢(shì)，react的生態(tài)系統(tǒng)更豐富、完善；
看起來vue很"niubility"的樣子，那vue小白用戶如何快速的動(dòng)手嘗試呢？下面以首頁（index.vue）為例，了解一下具體的用法，里面包含了組件的寫法及在頁面中如何組合、模板數(shù)據(jù)及事件綁定。
目錄結(jié)構(gòu)
效果圖
index.vue(views文件夾下，views文件夾下的每一個(gè)頁面由components中的多個(gè)組件拼合而成）。此頁面分為3塊，每一個(gè)組件都是多帶帶一個(gè)vue（里面定義自己的樣式和交互事件）。
footer組件（components文件夾下）
最后附上，最終生成的主html的結(jié)構(gòu)：
如果你想新建多個(gè)頁面，你也可以在項(xiàng)目中進(jìn)行相應(yīng)的配置。
main.js
在下面提到的項(xiàng)目里，也有我們常規(guī)的列表（views/blog.vue）及todolist （views/blogManage.vue）的demo，下面是截圖：
如果你想本地實(shí)踐一下，可以通過下面的兩種方式找到整個(gè)項(xiàng)目（readme文檔里有詳細(xì)的使用說明，運(yùn)行起來只需要兩步）
點(diǎn)擊鏈接（https://github.com/coder-Yin/...）；
在github上搜索learn-vue,第一個(gè)項(xiàng)目就是；
阿里也推出了Weex，其實(shí)叫Vue-Native也可以(這個(gè)名字只是為了讓你大致了解Weex是用來干嘛的，不要真的在網(wǎng)上搜~~)；另外，vue今年推出了2.0版本，相較1.0，主要做了下面的一些改變：
2.0 用一個(gè) fork 自 snabbdom 的輕量 Virtual DOM 實(shí)現(xiàn)對(duì)渲染層進(jìn)行了重寫；
改變了一些代碼寫法，如循環(huán)v-for——當(dāng)含有 index 時(shí)，以前傳遞的參數(shù)順序是(index, value)，現(xiàn)在變成了(value, index)。
官方支持的庫和工具——vue-router、vuex、vue-loader等都已經(jīng)升級(jí)并支持 2.0 了；
雖然看起來做了一些大的變化，但是幾乎90%的 API 和核心概念都沒有變，官方推出了從1.0到2.0的遷移方案，同時(shí)出了一個(gè)migration helper的工具，這個(gè)工具發(fā)現(xiàn)了一個(gè)棄用的用法之后，就會(huì)給出通知和建議，并附上關(guān)于詳細(xì)信息的鏈接。一般情況下，中小型的系統(tǒng)從vue1.0遷移到2.0版本大概只需要1天的時(shí)間?？烊?dòng)手嘗試吧~
iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85143.html
摘要：但是，今天我要寫一個(gè)快速入門，本人覺得還是有一點(diǎn)用處，因?yàn)椋也豢赡茉谝惶熘畠?nèi)精通某種東西，卻可以在一兩小時(shí)入門。不知道還要不要再來一個(gè)快速入門，發(fā)展得挺快，東西也像類似的全家。 以前看到多少天學(xué)習(xí)系列，我都深感煩躁，短短幾天怎么可以精通，那是對(duì)于他們而言。但是，今天我要寫一個(gè)快速入門，本人覺得還是有一點(diǎn)用處，因?yàn)?，我不可能在一天之?nèi)精通某種東西，卻可以在一兩小時(shí)入門。 回到vue本身...
摘要：前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點(diǎn)時(shí)間整理出一下前端工程師日常工作所需要的學(xué)習(xí)資料查找，幫助學(xué)習(xí)者快速掌握前端工程師開發(fā)的基本知識(shí)編程始于足下記住再牛逼的夢(mèng)想也抵不住傻逼似的堅(jiān)持蝴蝶 前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點(diǎn)時(shí)間整理出一下web前端工程師日常工作所需要的學(xué)習(xí)資料...
摘要：的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，同時(shí)擁有非常容易上手的中英文都有提供快速入門準(zhǔn)備地址地址沒錯(cuò)就只需要這兩個(gè)就可以開發(fā)了是核心文件，在這里只是為了提高開發(fā)效率而引用的，是可選的。專門存儲(chǔ)一些數(shù)據(jù)的屬性，數(shù)據(jù)一定是對(duì)象格式。 **關(guān)于前陣子的文章錯(cuò)誤有點(diǎn)多所以從新修改了并添加了一些在官方腳手架vue-cli開發(fā)時(shí)需要注意的事項(xiàng)，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫。...
摘要：改變其中的任何一層，另外一層都會(huì)改變。插值相信你也注意到了，通過的形式就能取到的值，并與進(jìn)行綁定。中改變中的值時(shí)相應(yīng)也改變了中的，從而也得到改變。上面的代碼改為這樣則不會(huì)隨著數(shù)據(jù)的改變而更新。顧名思義，用于條件判斷，和是一對(duì)。 什么是Vue.js showImg(http://7xawrk.com1.z0.glb.clouddn.com/15-11-8/16479285.jpg); v...
閱讀 555·2021-08-31 09:45
閱讀 1666·2021-08-11 11:19
閱讀 898·2019-08-30 15:55
閱讀 836·2019-08-30 10:52
閱讀 2871·2019-08-29 13:11
閱讀 2940·2019-08-23 17:08
閱讀 2851·2019-08-23 15:11
閱讀 3080·2019-08-23 14:33
