亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

MVVM框架

標簽:
Vue.js

1.MVVM框架双向绑定
图片描述

①解释

Model指的是数据部分,对应到前端就是Javascript对象,View指的是视图部分,对应到前端就是DOM,ViewModel就是连接视图和数据的中间件,在MVM架构下视图和数据是不能直接通讯的,通常会通过ViewModel来做通讯,ViewModel通常要实现一个Observer观察者,当数据发生变化,ViewModel能够观察到这种数据
的变化,然后通知到对应的视图进行更新,而当用户操作视图ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定

②例子

小明(model)喜欢上小花,但是又不敢直接表白,于是托小夏(viewModel)送一份情书给小花,小花(View)收到情书非常开心,对小明产生了好感。

model发生变化,通过viewModel通讯,view发生了改变。

这时其他同学都知道了,其中一个同学(user)跟小花说了小明的好话,于是小花更加喜欢小明,通过小夏告诉小明,小明更加用心追求。
user操作view,viewModel监听到view的变化,通知model做改动。
③精简
通过viewModel监听两端的变化,相互改变。

2.MVVM框架的应用场景

  • 1.针对具有复杂交互逻辑的前端应用
  • 2.提供基础的架构抽象
  • 3.通过Ajax数据持久化,保证前端用户体验
    • 好处:当前端对数据进行操作的时候,可以通过ajax请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里面那部分数据和内容,特别是移动端应用场景。刷新页面的代价太昂贵,需要重新加载很多资源,虽然有些资源会被缓存,但是页面的DOM、JS、CSS会被浏览器重新解析一遍,因此移动端页面通常会做成SPA单页面,在这个基础上就诞生了许多MVVM框架
    • 精简:通过ajax提升用户体验和性能

3.MVVM框架

  • 1.Angular.js
  • 2.react.js
  • 3.vue.js
點擊查看更多內容
3人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消