前端框架之 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>
相关推荐
码云之上17 小时前
Skill 里的脚本终于能跑了,星悟接 CubeSandbox 的纪实
前端·人工智能·前端框架
flash俊杰20 小时前
Electron 自定义协议与视频流式加载:从 moov atom 到 Range 请求的工程化实践
electron·前端框架
传奇开心果编程20 小时前
【Jetpack Compose基础语法学与练】第6课 TextField文本输入,字符串状态与输入交互
学习·前端框架·kotlin·android jetpack
梦想的颜色1 天前
【AI科普】AI 时代,纯 H5+CSS PK React & Vue:前端技术孰优孰劣深入剖析
ai·前端框架·大模型·vue·react·html5·vibecoding
传奇开心果编程1 天前
【ArkUI 练中学】第5课:路由导航与页面跳转
学习·华为·前端框架
码上成长1 天前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架
传奇开心果编程1 天前
【ArkUI 练中学】第4课:高级布局与列表性能优化
学习·华为·前端框架
传奇开心果编程1 天前
【ArkUI 练中学】第1课:从零开始
学习·华为·前端框架
刺客码2 天前
Layui 表格固定列行高错位问题解决方案
前端框架·layui·jquery·web