前端框架之 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>
相关推荐
杨进军5 小时前
React 实现节点删除
前端·react.js·前端框架
杨进军6 小时前
React 实现 useReducer
前端·react.js·前端框架
伍哥的传说16 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
EutoCool16 小时前
Qt:布局管理器Layout
开发语言·c++·windows·嵌入式硬件·qt·前端框架
年纪轻轻就扛不住1 天前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
杨进军1 天前
实现 React 函数组件渲染
前端·react.js·前端框架
杨进军1 天前
实现 React Fragment 节点渲染
前端·react.js·前端框架
杨进军1 天前
实现 React 类组件渲染
前端·react.js·前端框架
杨进军1 天前
实现 React 文本节点渲染
前端·react.js·前端框架
杨进军1 天前
简易实现 React 页面初次渲染
前端·react.js·前端框架