好程序員web前端分享MVVM框架Vue實現原理

  好程序員web前端分享MVVM框架Vue實現原理,Vue.js是當下很火的一個JavaScript MVVM庫,它是以數據驅動和組件化的思想構建的。相比於Angular.js和react.js更加簡潔、更易於理解的API,使得咱們可以快速地上手並使用Vue.js。javascript

圖片描述

1.什麼是MVVM呢?css

MVVM的簡寫是Model-View-ViewModel。html

  在過去的10年裏面,咱們已經把不少傳統的服務端代碼放到了瀏覽器中,這樣就產生了成千上萬行的javascript代碼,它們鏈接了HTML 和CSS文件,但缺少正規的組織形式,這也就是爲何不少開發者使用框架。好比:angular.js、react.js、vue.js。有了這些框架以後,瀏覽器的兼容性問題已經再也不是咱們前端開發的阻礙。(這裏應該有歡呼聲,爲何要這麼說,下次寫瀏覽器兼容時再告訴大家)前端的項目體積不斷的在加大,從一個簡陋的小小的頁面變成炫彩的頁面須要成千上萬的代碼,這樣致使了項目的可維護性和擴展性包括重要的安全性等成了最主要問題。前端

  這也是爲何有不少不少的開發人員使用框架,框架簡潔,有API。在當年那個時代爲了解決瀏覽器兼容性問題,出現了不少類庫,其中最典型的就是JQuery。可是這類庫沒有實現對業務邏輯的分紅,因此維護性和擴展性極差。綜上兩方面緣由,纔有了MVVM模式一類框架的出現。好比說vue.js框架就是經過數據的雙向綁定,極大了提升了開發效率。vue

MVVM框架
Vue就是基於MVVM模式實現的一套框架,在vue框架中:java

Model:指的是js中的數據,如對象,數組等等。react

View:指的是頁面視圖webpack

viewModel:指的是vue實例化對象,ios

  都說Vue.js是一個漸進式的javascript框架, 漸進式是什麼意思?程序員

  假如你已經有一個現成的服務端應用,你能夠將vue 做爲該應用的一部分加入其中,帶來更好的交互體驗;  假如你想將更多的業務邏輯放到界面來實現,那麼Vue能夠知足你大部分的需求,(vue2.x+vue-router+axios+webpack)。和其它前端框架同樣,VUE的優勢在於能夠很好的每個功能、特效變成組件化,有更好的可維護性,也能夠進行復用,每一個組件都包含屬於本身的HTML、CSS、JAVASCRIPT以用來渲染網頁中相應的地方若是咱們構建一個大型的應用,在這一點上,vue有一個命令行工具,使快速初始化一個真實的工程變得很是簡單(vue init webpack my-project)。咱們可使用VUE的單文件組件,它包含了各自的html、JavaScript以及帶做用域的css或scss。以上這三個例子,是一步步遞進的,也就是說對Vue.js的使用可大可小,它都會有相應的方式來整合到你的項目中。因此說它是一個漸進式的框架。Vue.js最獨特的特性:當咱們的數據變動時,Vue.js會幫你更新全部網頁中用到它的地方。

相關文章
相關標籤/搜索