新手簡(jiǎn)單了解vue
前言
作為一個(gè)剛?cè)胄胁痪玫牟锁B(niǎo)不知從什么時(shí)候開(kāi)始就有了寫(xiě)一個(gè)自己的專欄的想法，剛好今天沒(méi)事就給自己挖一個(gè)坑，分享一下我對(duì)vue的見(jiàn)解和一些領(lǐng)悟，整個(gè)專欄應(yīng)該會(huì)包括vue，vue-cli，vue-router，vuex，nuxt和一些webpack的簡(jiǎn)單入門(mén)，當(dāng)然實(shí)戰(zhàn)項(xiàng)目也一定會(huì)放出來(lái)，更新頻率視手頭的項(xiàng)目進(jìn)度而定，話不多說(shuō)，開(kāi)始今天的第一篇專欄。
vue是什么？為什么我們要使用vue？
說(shuō)到了vue，我們就不得不先聊一下vue是什么以及為什么我們要使用vue，他能給我們的開(kāi)發(fā)帶來(lái)什么樣的便利呢？
首先，我們來(lái)看一下vue的自我介紹：
Vue (讀音 /vjuː/，類(lèi)似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
請(qǐng)注意我加粗的這一點(diǎn)，漸進(jìn)式框架是相比于Angular.js我最喜歡的一點(diǎn)（ps：絕對(duì)不是因?yàn)関ue的文檔寫(xiě)的最好 :-) ）
這意味著，vue是一個(gè)無(wú)論項(xiàng)目大小都可以滿足開(kāi)發(fā)需求的框架。（想當(dāng)年我一次用vue-cli裝的項(xiàng)目只有幾十M，昨天從老大拷貝過(guò)來(lái)的src都已經(jīng)200M了……）
通俗的來(lái)講，vue就是一個(gè)已經(jīng)搭建好的空屋，與單純使用jQuery這種庫(kù)比，可以更好地實(shí)現(xiàn)代碼復(fù)用，減少工作量，與Angular.js這種家具電器一應(yīng)俱全的框架相比又不會(huì)一件件挑選，把自己不喜歡再一件件的扔了，甚至required 必須用且耗費(fèi)空間的！
簡(jiǎn)而言之，vue做了必須的事，又不會(huì)做職責(zé)之外的事。
vue的MVVM設(shè)計(jì)模式是什么？MVC又是什么？
如果你對(duì)前端有過(guò)了解的話一定知道MVVM和MVC這兩種設(shè)計(jì)模式，而且很有可能對(duì)mvp也有一些了解。
MVC即model，view，control，jQuery就是采用的這種設(shè)計(jì)模式，熟悉jQuery的同學(xué)恐怕早就對(duì)$()深通惡絕了吧。
MVVM即model，view，viewmodel，它是數(shù)據(jù)驅(qū)動(dòng)模式，即所有的一切通過(guò)操作數(shù)據(jù)來(lái)進(jìn)行，而盡量避免操作dom樹(shù)。
換句話說(shuō)，我們不關(guān)注dom的結(jié)構(gòu)，而是考慮數(shù)據(jù)該如何儲(chǔ)存，用戶的操作在view通過(guò)viewmodel進(jìn)行數(shù)據(jù)處理，分情況是否通過(guò)ajax與model層進(jìn)行交互，再返回到view層，在這個(gè)過(guò)程中view和viewmodel的數(shù)據(jù)雙向綁定使得我們完全的擺脫了對(duì)dom的繁瑣操作，而是專心于對(duì)用戶的操作進(jìn)行處理，避免了MVC中control層過(guò)厚的問(wèn)題。
VUE組件化開(kāi)發(fā)的優(yōu)點(diǎn)
說(shuō)起來(lái)還是比較感慨的，剛開(kāi)始接觸VUE的時(shí)候我對(duì)于他的組件還是并不喜歡的，什么父?jìng)髯?，子不能傳父，什么占坑，傳參等等，完全是一頭霧水，并且感覺(jué)這些東西完全沒(méi)有必要。
后來(lái)的事實(shí)證明，作為整個(gè)VUE文檔中篇幅最大的部分，組件可是相當(dāng)?shù)奶聿?，要不是有組件這么易于復(fù)用，不易污染的特性，怕不是我都瘋了無(wú)數(shù)回。
打個(gè)比方，我們現(xiàn)在要做一個(gè)有一百個(gè)頁(yè)面的項(xiàng)目，其中有三十三個(gè)導(dǎo)航欄是A，六十七個(gè)導(dǎo)航欄是B，這其中三十三個(gè)A導(dǎo)航欄中有一個(gè)模塊與眾不同，可以分為A1,A2,A3,A4……
這個(gè)如果用jQuery解決的話，就得自己封裝模板插件，且要么寫(xiě)(A,B,A1,A2，An).length個(gè)模板，要么模板套模板。
嘖嘖，累死個(gè)狗娘養(yǎng)的了。
這點(diǎn)上，VUE的模板就簡(jiǎn)單的多，我們先算好要多少個(gè)組件，然后看看組件之間有沒(méi)有相互嵌套，把所有需要的地方都先挖上坑（寫(xiě)好組件標(biāo)簽），并且在組件標(biāo)簽中寫(xiě)好要傳入組件的參數(shù)，再分別寫(xiě)好各種組件的實(shí)現(xiàn)，簡(jiǎn)簡(jiǎn)單單的就寫(xiě)好了，即使是嵌套也只是組件標(biāo)簽中套一個(gè)組件標(biāo)簽，更簡(jiǎn)單的改一個(gè)傳參能夠?qū)崿F(xiàn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中SPA單頁(yè)面應(yīng)用程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue3之所以受廣大袁友的喜歡，優(yōu)點(diǎn)必不可少呀，比如：可以監(jiān)聽(tīng)動(dòng)態(tài)新增的屬性；可以監(jiān)聽(tīng)刪除的屬性 ；可以監(jiān)聽(tīng)數(shù)組的索引和 length 屬性；下面文章小編就來(lái)向大家介紹vue3，感興趣的小伙伴不要錯(cuò)過(guò)奧2021-09-09
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)之ElementUI的表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
iView 是一套基于 Vue.js 的開(kāi)源 UI 組件庫(kù)，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。這篇文章主要介紹了在vue項(xiàng)目中引用Iview的方法,需要的朋友可以參考下2018-09-09
在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
element?table?數(shù)據(jù)量大頁(yè)面卡頓的解決
這篇文章主要介紹了element?table?數(shù)據(jù)量大頁(yè)面卡頓的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02