前端框架之 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>
相关推荐
禅思院4 小时前
探索Vite深入 Rollup 分块插件:从零实现一个智能分包工具
前端·前端框架·vite
我命由我123457 小时前
在 React 项目中,配置了 setupProxy.js 文件,无法正常访问 http://localhost:3000
开发语言·前端·javascript·react.js·前端框架·ecmascript·js
A923A7 小时前
【从零开始学 React | 第一章】React 基础与 JSX 核心语法
前端·react.js·前端框架·jsx
梁高强1 天前
重新思考模板语言与 TypeScript 的结合:一条可落地的新路径
前端框架
@大迁世界1 天前
17.在 React 中如何根据条件决定渲染哪个组件?
前端·javascript·react.js·前端框架·ecmascript
ISkp3V8b42 天前
从 ReAct 到 Workflow:基于云端 API 构建事件驱动的智能体
前端·react.js·前端框架
谢尔登2 天前
【React】setState 触发渲染的流程
前端·react.js·前端框架
落魄江湖行2 天前
入门篇一:Nuxt 4 快速上手:5分钟让项目跑起来
前端框架·nuxt4
光影少年2 天前
vite 8 发布,双引擎时代结束
前端·javascript·前端框架
敲敲了个代码3 天前
React 那么多状态管理库,到底选哪个?如果非要焊死一个呢?这篇文章解决你的选择困难症
前端·javascript·学习·react.js·前端框架