新手簡單瞭解vue

Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。下面我們來簡單瞭解下吧

前言

作爲一個剛入行不久的菜鳥不知從什麼時候開始就有了寫一個自己的專欄的想法,剛好今天沒事就給自己挖一個坑,分享一下我對vue的見解和一些領悟,整個專欄應該會包括vue,vue-cli,vue-router,vuex,nuxt和一些webpack的簡單入門,當然實戰項目也一定會放出來,更新頻率視手頭的項目進度而定,話不多說,開始今天的第一篇專欄。

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做了必須的事,又不會做職責之外的事。

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

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

MVVM即model,view,viewmodel,它是數據驅動模式,即所有的一切通過操作數據來進行,而儘量避免操作dom樹。

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

VUE組件化開發的優點

說起來還是比較感慨的,剛開始接觸VUE的時候我對於他的組件還是並不喜歡的,什麼父傳子,子不能傳父,什麼佔坑,傳參等等,完全是一頭霧水,並且感覺這些東西完全沒有必要。
後來的事實證明,作爲整個VUE文檔中篇幅最大的部分,組件可是相當的添彩,要不是有組件這麼易於複用,不易污染的特性,怕不是我都瘋了無數回。

打個比方,我們現在要做一個有一百個頁面的項目,其中有三十三個導航欄是A,六十七個導航欄是B,這其中三十三個A導航欄中有一個模塊與衆不同,可以分爲A1,A2,A3,A4……

這個如果用jQuery解決的話,就得自己封裝模板插件,且要麼寫(A,B,A1,A2,An).length個模板,要麼模板套模板。
嘖嘖,累死個狗孃養的了。

這點上,VUE的模板就簡單的多,我們先算好要多少個組件,然後看看組件之間有沒有相互嵌套,把所有需要的地方都先挖上坑(寫好組件標籤),並且在組件標籤中寫好要傳入組件的參數,再分別寫好各種組件的實現,簡簡單單的就寫好了,即使是嵌套也只是組件標籤中套一個組件標籤,更簡單的改一個傳參能夠實現。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章