vue簡單入門(一)vue是什麼,爲何咱們要學vue?

做爲一個剛入行不久的菜鳥不知從何時開始就有了寫一個本身的專欄的想法,恰好今天沒事就給本身挖一個坑,分享一下我對vue的看法和一些領悟,整個專欄應該會包括vue,vue-cli,vue-router,vuex,nuxt和一些webpack的簡單入門,固然實戰項目也必定會放出來,更新頻率視手頭的項目進度而定,話很少說,開始今天的第一篇專欄。前端

vue是什麼?爲何咱們要使用vue?

說到了vue,咱們就不得不先聊一下vue是什麼以及爲何咱們要使用vue,他能給咱們的開發帶來什麼樣的便利呢?
首先,咱們來看一下vue的自我介紹:vue

Vue (讀音 /vjuː/,相似於 view) 是一套用於構建用戶界面的 漸進式框架

請注意我加粗的這一點,漸進式框架是相比於Angular.js我最喜歡的一點(ps:絕對不是由於vue的文檔寫的最好 :-) )
這意味着,vue是一個不管項目大小均可以知足開發需求的框架。(想當年我一次用vue-cli裝的項目只有幾十M,昨天從老大拷貝過來的src都已經200M了……)
通俗的來說,vue就是一個已經搭建好的空屋,與單純使用jQuery這種庫比,能夠更好地實現代碼複用,減小工做量,與Angular.js這種傢俱電器包羅萬象的框架相比又不會一件件挑選,把本身不喜歡再一件件的扔了,甚至required 必須用且耗費空間的!
簡而言之,vue作了必須的事,又不會作職責以外的事。webpack

vue的MVVM設計模式是什麼?MVC又是什麼?

若是你對前端有過了解的話必定知道MVVM和MVC這兩種設計模式,並且頗有可能對mvp也有一些瞭解。
MVC即model,view,control,jQuery就是採用的這種設計模式,熟悉jQuery的同窗恐怕早就對$()深通惡絕了吧。web

clipboard.png

MVVM即model,view,viewmodel,它是數據驅動模式,即全部的一切經過操做數據來進行,而儘可能避免操做dom樹。ajax

clipboard.png

換句話說,咱們不關注dom的結構,而是考慮數據該如何儲存,用戶的操做在view經過viewmodel進行數據處理,分狀況是否經過ajax與model層進行交互,再返回到view層,在這個過程當中view和viewmodel的數據雙向綁定使得咱們徹底的擺脫了對dom的繁瑣操做,而是專心於對用戶的操做進行處理,避免了MVC中control層過厚的問題。vue-router

VUE組件化開發的優勢

提及來仍是比較感慨的,剛開始接觸VUE的時候我對於他的組件仍是並不喜歡的,什麼父傳子,子不能傳父,什麼佔坑,傳參等等,徹底是一頭霧水,而且感受這些東西徹底沒有必要。
後來的事實證實,做爲整個VUE文檔中篇幅最大的部分,組件但是至關的添彩,要不是有組件這麼易於複用,不易污染的特性,怕不是我都瘋了無數回。
打個比方,咱們如今要作一個有一百個頁面的項目,其中有三十三個導航欄是A,六十七個導航欄是B,這其中三十三個A導航欄中有一個模塊不同凡響,能夠分爲A1,A2,A3,A4……
這個若是用jQuery解決的話,就得本身封裝模板插件,且要麼寫(A,B,A1,A2,An).length個模板,要麼模板套模板。
嘖嘖,累死個狗孃養的了。
這點上,VUE的模板就簡單的多,咱們先算好要多少個組件,而後看看組件之間有沒有相互嵌套,把全部須要的地方都先挖上坑(寫好組件標籤),而且在組件標籤中寫好要傳入組件的參數,再分別寫好各類組件的實現,簡簡單單的就寫好了,即便是嵌套也只是組件標籤中套一個組件標籤,更簡單的改一個傳參可以實現。vuex

相關文章
相關標籤/搜索