Vue學(xué)習(xí)日記（一）——Vue介紹

王晗發(fā)布于2019-08-26 11:33 / 1490人閱讀

摘要：的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個(gè)框架，下面，貼一個(gè)官方的漸進(jìn)式框架介紹圖吧，方便理解。

前言

本人學(xué)習(xí)了一段時(shí)間的vue，并嘗試寫(xiě)了一些小Demo之后，將vue投入了幾個(gè)項(xiàng)目之后，一直在邊學(xué)習(xí)邊使用，經(jīng)過(guò)看了vue,vuex,vue-router的官方文檔和慕課網(wǎng)上的一些實(shí)戰(zhàn)視頻之后，深有體會(huì)，故此寫(xiě)下這些文章。

前端框架比較

其實(shí)的話，前端有很多的框架，很多初學(xué)前端的人可能沒(méi)有接觸到框架，以為框架是很高大上的東西，就我個(gè)人而言，我是聽(tīng)從師姐的學(xué)習(xí)路線開(kāi)始學(xué)習(xí)前端的，一開(kāi)始的時(shí)候接觸的就是html,css,js這些基本語(yǔ)言，對(duì)于框架，一直是覺(jué)得很高大上的東西。后來(lái)，經(jīng)過(guò)長(zhǎng)時(shí)間的與框架打交道之后，也明白了，基礎(chǔ)對(duì)于前端開(kāi)發(fā)者是很重要的，框架也就只是將你會(huì)復(fù)用的代碼進(jìn)行包裝起來(lái)方便你的使用，最重要的還是基礎(chǔ)。

目前前端開(kāi)發(fā)有很多的框架在市面上，其實(shí)說(shuō)是框架，如果從C語(yǔ)言java語(yǔ)言那些語(yǔ)言來(lái)說(shuō)，也就是庫(kù)，一些封裝好的東西，告訴你用法，就可以簡(jiǎn)單的實(shí)現(xiàn)一個(gè)簡(jiǎn)單的項(xiàng)目了。如果想更加了解前端框架，建議可以百度百度，或者看這篇知乎討論，點(diǎn)擊里面的文章看看，引用一下這里的一張圖片展示一下目前的前端框架。

是的這只是部分前端框架，就我個(gè)人覺(jué)得，目前前端框架的三大巨頭也就只是
vue,react,angular（順序與排名無(wú)關(guān)）。

各個(gè)框架都有自己擅長(zhǎng)的一方面：

vue擅長(zhǎng)單頁(yè)面多路由的開(kāi)發(fā)

react適合多頁(yè)面，手機(jī)app還有一些大型的開(kāi)發(fā)

angular系統(tǒng)比較完善，適合快速搭建產(chǎn)品的原型

但是也各有各的劣勢(shì)：

vue并不特別適合多頁(yè)面的開(kāi)發(fā)

react在單頁(yè)面開(kāi)發(fā)性能并不比vue好，因?yàn)関ue比較輕便

angular不適合程序員去自我發(fā)揮很多，因?yàn)槠浠九渲煤灭I了很多東西

當(dāng)然，以上也都只是個(gè)人的見(jiàn)解而已，有錯(cuò)誤還望包涵指正，關(guān)于他們的社區(qū)，就不多做介紹了，三大框架社區(qū)都比較完善。

Vue的優(yōu)勢(shì)

Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，如果你不懂什么是mvvm模式可以看一下這篇文章個(gè)人覺(jué)得比較容易理解，同時(shí)擁有非常容易上手的API；

Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。

Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。

Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。

另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

簡(jiǎn)單的說(shuō)，Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)

Vue.js的特性如下：

輕量級(jí)的框架

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

指令

插件化

Vue漸進(jìn)式框架

為什么說(shuō)vue是漸進(jìn)式框架呢？

其實(shí)vue的官方首頁(yè)就說(shuō)了，vue,漸進(jìn)式JavaScript 框架

其實(shí)嚴(yán)格的說(shuō)，vue并不是一個(gè)框架，他只是一個(gè)庫(kù)，和jq一樣，可以操作dom的庫(kù)，不同的是vue操作的是虛擬dom，至于什么是虛擬dom我會(huì)在下篇文章繼續(xù)介紹。

vue并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個(gè)框架，下面，貼一個(gè)官方的漸進(jìn)式框架介紹圖吧，方便理解。

正如上圖解釋?zhuān)粋€(gè)vue漸進(jìn)式框架就是由

聲明式渲染vue.js

組件系統(tǒng)element-ui（也可以用bootstrap等，但是建議還是用這個(gè)，因?yàn)槠渌倪€要下載其他的dom庫(kù)）

客戶端路由vue-router

大型狀態(tài)管理vuex

構(gòu)建工具webpack

Vue全家桶

Vue著名的全家桶其實(shí)就是，包含了vue-router，vuex， vue-resource（現(xiàn)在基本不用，而是用更為簡(jiǎn)單的axios）。再加上構(gòu)建工具vue-cli，就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成。

同時(shí)，在vue調(diào)試方面，可以選擇安裝chrome插件vue Devtools，以及有專(zhuān)門(mén)的組件庫(kù)elment-ui，輕輕松松就可以完成一個(gè)較大型的項(xiàng)目

總結(jié)

vue個(gè)人覺(jué)得是很不錯(cuò)的框架，特別還是國(guó)內(nèi)牛人發(fā)布的，接下來(lái)還會(huì)有vue一系列的文章，以及vue+axios+mysql+node+express全棧實(shí)現(xiàn)一個(gè)系統(tǒng)的文章，去更加深入的了解vue。當(dāng)然還有更加深入的理解，大家也可以看看官方文檔，都介紹的很充分了。