当前位置: 首页 > news >正文

vue从入门到精通(四):MVVM模型

一,MVVM

MVVM(Model–view–viewmodel)是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来。详见MVVM

二,Vue中的MVVM

Vue虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

const vm = new Vue({el:'#root',data: {name: '张三'}
});

MVVM模型:

M: 模型(Model):data中的数据。
V: 视图(View):模板代码。
VM: 视图模型(ViewModel):Vue实例

MVVM模型

备注:

  1. data中所有的属性,最后都出现在了vm身上。
  2. vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。

三,实战

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>MVVM模型</title><script src="../js/vue.js"></script></head><body><div id="root"><h1>{{name}}</h1><h1>{{$options}}</h1></div></body><script type="text/javascript">const vm = new Vue({el:'#root',data:{name:'张三',} })</script>
</html>
http://www.lryc.cn/news/351595.html

相关文章:

  • 提供一个c# winform的多语言框架源码,采用json格式作为语言包,使用简单易于管理加载且不卡UI,支持“语言分级”管理
  • Docker常见命令
  • 中科大6系+先研院+中南大学电子信息学院2023年保研经历
  • 分布式理论--BASE
  • 【计算机网络原理】浅谈应用层协议的自定义和传输层UDP协议的总结
  • 正则表达式及其应用
  • VUE面试题(3)--vue常见面试题
  • 2024.05.24|生信早报【AI测试版】
  • 计算机毕业设计 | springboot药品库存追踪与管理系统 药店管理(附源码)
  • Flink 对接 Hudi 查询数据,java代码编写
  • 计算机操作系统总结(1)
  • HTML5好看的通用网站模板源码
  • AWS安全性身份和合规性之Inspector
  • mybatis plus 配置多数据源(数据源进行切换)
  • Docker-Android安卓模拟器本地部署并实现远程开发测试
  • vue-封装上下(垂直方向)轮播
  • 海外私人IP和原生IP有什么区别,谁更有优势?
  • 主流容器工具对比以及重点推荐学习的企业级工具
  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线编辑word文件,同时保存数据和文件
  • 个人感觉对Material设计有用的几个网址
  • ubuntu18 安装sudo
  • 【力扣一轮】202.快乐数 1.两数之和
  • Vue小程序项目知识积累(二)
  • RK3588 Android13 预安装自己的apk应用及把这个应用设置为默认桌面
  • NLP(16)--生成式任务
  • 直播回放| 机器人任务挑战赛线上培训资料合集
  • flask Web应用的接口调试
  • 简单易懂的 API 集成测试方法
  • leetcode 239. 滑动窗口最大值、347.前 K 个高频元素
  • npm常用指令