前端框架之 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>
相关推荐
zihan5184 小时前
自己做软件日记9/21 得到了一个良好的文件结构框架
后端·flutter·前端框架·android studio
慧一居士4 小时前
Nuxt 框架 插件plugins功能介绍和使用示例
前端框架
GISer_Jing1 天前
Come on,工作总结
前端·ai·前端框架
Flynt3 天前
Shopify 弃 React Native 上了 HN 1272 分,我复现了它给 Agent 用的那套无头架构
react native·前端框架·agent
aichitang20243 天前
前端小skill
前端·人工智能·算法·ai·前端框架
光影少年3 天前
setImmediate 和 setTimeout(0) 的区别
android·前端·react.js·ios·前端框架
码云之上4 天前
Skill 里的脚本终于能跑了,星悟接 CubeSandbox 的纪实
前端·人工智能·前端框架
flash俊杰4 天前
Electron 自定义协议与视频流式加载:从 moov atom 到 Range 请求的工程化实践
electron·前端框架
传奇开心果编程4 天前
【Jetpack Compose基础语法学与练】第6课 TextField文本输入,字符串状态与输入交互
学习·前端框架·kotlin·android jetpack