前端框架之 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号10 小时前
react相关报错--持续更新中
前端·react.js·前端框架
Huazzi.19 小时前
【记录】前端项目的开发调试流程
前端·前端框架
一朵好运莲1 天前
在React中引入tailwind css(图文详解)
前端·react.js·前端框架
刺客-Andy2 天前
React 第二十节 useRef 用途使用技巧注意事项详解
前端·javascript·react.js·typescript·前端框架
hawleyHuo3 天前
umi 能适配 taro组件?
前端·前端框架
前端理想哥3 天前
TypeScript入门:三分钟学会可索引类型
前端·前端框架·前端工程化
Ares码农人生3 天前
React 前端框架入门
前端框架
北京_宏哥3 天前
《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(7)-Charles苹果手机手机抓包知否知否?
ios·前端框架·charles
北京_宏哥3 天前
《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
程序员·前端框架·api
wayhome在哪3 天前
从 Vue 2 到 Vue 3:用一个 Todos 组件见证前端框架的华丽变身 🚀
javascript·vue.js·前端框架