首页 > 其他分享 >MVVM是前端分层开发理念

MVVM是前端分层开发理念

时间:2022-12-06 16:02:13浏览次数:48  
标签:MVVM 前端 VM 视图 分层 组件 数据 页面

一、MVVM是前端分层开发理念,总共分为3层,包括M层、V层和VM层,其中VM层是核心,也是M层和V层的调度者。
M层是每个页面中存储的数据,也称作数据层Model;V层是每个页面中的HTML代码,也叫作视图层View,一般是把M层中的数据渲染到V层。
M层中的数据并不能直接渲染到V层,需要通过VM层调度,同样地,在V层中修改了数据,也不能直接同步到M层,还是需要VM层来调度,所以VM层是M层和V层的调度者,是核心。MVVM的开发理念如图1-1所示。

 

 二、Vue.js核心理念

Vue.js的核心理念是数据驱动视图和组件化。
Vue.js有双向数据绑定功能,当JS中的数据发生变化时,页面视图会自动改变,只需要注意数据的变化,而不需要操作DOM元素,这就是数据驱动视图。
组件化理念是把整个页面看作一个大组件,里面的每个元素或者功能可以当作子组件,每一个组件都可以重复调用,组件是本书重点讲解的知识点之一。

 

标签:MVVM,前端,VM,视图,分层,组件,数据,页面
From: https://www.cnblogs.com/callbin/p/16955547.html

相关文章

  • 疫情当下,远程工作兴起!前端音视频通话?学!
    作者:​​荣顶​​ 、​​github​​声明:文章为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!前言​​WebRTC从实战到未来!迎接风口,前端必学......
  • 微前端概念
    微前端是什么?微前端提供了一种技术:可以将多个独立的Web应用聚合到一起,提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用,但是在技术角度上是由一个个独......
  • 前端直传图片到oss操作
    1.前端直传图片到oss操作:不经过后端,直接前段直传,阿里云也支持。   TRANSLATEwithxEnglishArabicHebrewPolishBulgarianHindiPortugue......
  • 前端代码规范
    1.京东凹凸实验室前端代码规范,网址:[https://guide.aotu.io/](https://guide.aotu.io/)(1)、正确写法 <br>   不推荐写法:<br/>(2)、纯数字输入框   使用 type="t......
  • Vue的MVVM模型
    MVVM模型            1.M:模型(Model):data中的数据            2.V:视图(View):模板代码        ......
  • #yyds干货盘点#前端keepalive缓存清理
    说到​​Vue​​​缓存,我们肯定首先选择官方提供的缓存方案​​keep-alive​​内置组件来实现。​​keep-alive​​组件提供给我们缓存组件的能力,可以完整的保存当前组......
  • 前端JS
    html页面两种引入js的方式Script标签内写代码<script>//在这里写你的JS代码</script>引入额外的JS文件<scriptsrc="myscript.js"></script>两种注释语法//......
  • 前端开发npm start的引导过程
    以react初始化项目为例:[email protected]:geektcp/react-init.git package.json的内容如下:{"name":"react-init","version":"0.1.0","private":......
  • QDU-前端的修改
    以修改为中文显示为例下载前端npminstall#weusewebpackDllReferencetodecreasethebuildtime,#thiscommandonlyneedsexecuteonceunlessyouupgrade......
  • 业务流程 | 前端 =》 后端 =〉 数据库 (待补充)
    关键词:CSR前=》C=〉S=》R=〉S=》C=〉前dtoboentityentity、bo、vo、po、dto、pojo如何理解和区分?-简书(jianshu.com)......