前端框架之 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>
相关推荐
三声三视1 小时前
Electron鸿蒙桌面应用打包部署完全指南(含自动更新)
前端·electron·前端框架·harmonyos·鸿蒙·桌面端
@大迁世界12 小时前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架
我命由我1234521 小时前
Dart - Dart SDK、Hello World 案例、变量声明、常量声明、常量 final、字符串类型
前端·flutter·前端框架·html·web·dart·web app
不会写DN1 天前
为什么需要 @types/react? 解决“无法找到模块 react 的声明文件”报错
前端·react.js·前端框架
右耳朵猫AI1 天前
React技术周刊 2026年第14周
前端·react.js·前端框架
canonical_entropy1 天前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
invicinble3 天前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架
invicinble3 天前
前端框架使用vue-cli( 第二层:工程配置层--路由页面配置)
javascript·vue.js·前端框架
invicinble3 天前
前端框架使用vue-cli( 第二层:工程配置层--总览)
前端·vue.js·前端框架