前端框架之 MVVM

MVVM

vue 是典型的 MVVM 框架,v-model 实现了 VM 部分

MVVM 的理解

M:模型层、数据层,简单理解就是定义在 data 中的变量
V:视图层,就是浏览器展示的页面
M => V:数据的改变,需要同步更新页面。Vue2 中用到了 Object.defineProperty;Vue3 中用到了 Proxy
V=>M:页面输入,需要更新变量。这里用到了 v-model 来替我们完成变量的更新,这个就是 VM

这里指用户的输入:输入框、单选框、多选框、选择器、开关、时间日期选择等

vue如何变为 MVC

将 MVVM 变为 MVC 其实很简单,就是手动处理用户的输入,更新变量。

进一步:就是将 【v-model】 改为 【v-bind 和 v-on】

举例
复制代码
//  双向数据绑定 MVVM
<el-input v-model="input" placeholder="请输入内容"></el-input>

// 手动处理 数据更新  MVC
<el-input :value="input"  @input="input = $event.target.value" placeholder="请输入内容"></el-input>
相关推荐
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
杨进军6 小时前
React 协调器 render 阶段
前端·react.js·前端框架
Codebee6 小时前
50行代码搞定OneCode摄像头插件:快速定制实战指南
前端框架·开源·ecmascript 6
杨进军6 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
上单带刀不带妹8 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军9 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
vim怎么退出10 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
Codebee1 天前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
jingling5551 天前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
伍哥的传说1 天前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙