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.mzph.cn/news/839541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手机相册怎么恢复?如何挽救误删的照片?

手机相册成为我们存储和分享照片的主要途径&#xff0c;这些照片可能代表着我们的美好回忆、重要时刻或珍贵的瞬间。然而&#xff0c;有时候我们会因为误操作或一时冲动&#xff0c;将一些珍贵的照片误删&#xff0c;并且很难找回来。手机相册怎么恢复呢&#xff1f;本文将为你…

基于Tensorflow+Keras的卷积神经网络(CNN)人脸识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 人脸识别是计算机视觉领域的一个重要研究方向&#xff0c;广泛应用于安全监控、身份验证、人机…

Android 性能为王时代SparseArray和HashMap一争高下

文章目录 一、SparseArray 源码分析1. **类定义和构造函数**2. **基本方法**2.1 put(int key, E value)2.2 get(int key)2.3 delete(int key)2.4 removeAt(int index)2.5 gc()2.6 size()2.7 keyAt(int index) 和 valueAt(int index) 3. **辅助方法**3.1 binarySearch() 二、使用…

最新AI智能问答创作系统ChatGPT网站源码V4.20版本,GPTs、AI绘画、AI换脸、垫图混图+(GoMaxAI系统搭建部署教程文档)

Midjourney&#xff08;人工智能图像生成器&#xff09;&#xff0c;仅用了一年时间就已经火爆全球。它就像是一个想象力的助力器&#xff0c;总能带给人们一些不可思议的奇妙的作品。Midjourney虽然是一款最强的AI绘画工具&#xff0c;但对于很多人来说Midjourney怎么用&#…

使用JavaScript日历小部件和DHTMLX Gantt的应用场景(三)

DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件&#xff0c;这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表&#xff0c;可满足项目管理应用…

匝间冲击耐压试验仪产品介绍及工作原理

产品简介 武汉凯迪正大KD2684S匝间冲击耐压试验仪适用于电机、变压器、电器线圈等这些由漆包线绕制的产品。因漆包线的绝缘涂敷层本身存在着质量问题&#xff0c;以及在绕线、嵌线、刮线、接头端部整形、绝缘浸漆、装配等工序工艺中不慎而引起绝缘层的损伤等&#xff0c;都会造…

在线投票系统源码 网上投票平台创建 安全稳定 支持自定义投票规则+礼物道具功能

分享一款在线投票系统源码&#xff0c;是一款功能丰富、安全稳定的网络投票平台解决方案。通过本源码&#xff0c;用户可以轻松创建并管理各种在线投票活动&#xff0c;支持自定义投票规则&#xff0c;同时集成礼物道具功能&#xff0c;增强用户参与度和投票活动的趣味性&#…

2024 年 电工杯(B题)大学生数学建模挑战赛 | 平衡膳食食谱 | 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 CS团队倾注了大量时间和心血&#xff0c;深入挖掘解决方案。通…

常用的框架——— Android UtilCode

AndroidUtilCode是一个功能强大且易于使用的Android库。该库封装了Android开发中经常使用的具备完整演示和单元测试的功能。经过使用其封装的API&#xff0c;能够大大提升开发效率。该程序主要由两个模块组成&#xff0c;utilcode&#xff08;一般在开发中使用&#xff09;和su…

【真人Q版手办风】线稿手绘+ AI绘图 Stable Diffusion 完整制作过程分享

大家好&#xff0c;我是设计师阿威。 今天给大家分享一篇【真人Q版卡通手办】风格的制作过程&#xff0c;话不多说&#xff0c;进入正题。 成品预览 手绘线稿 首先&#xff0c;我使用的是老款手绘软件【SAI】&#xff0c;用[钢笔工具]进行了人物的线稿Q版描绘。&#x1f447…

巨控无线通讯模块在煤化工皮带保护系统中的应用

一、项目介绍 近年来由于煤矿化工行业在实际生产过程中事故频发&#xff0c;国家安监部门自2022年起开展了为其三年的专项整治行动&#xff0c;皮带运输系统作为煤矿化工行业自动化系统的重要组成部分成为此次专项整治重点。 兖矿新疆能化有限公司作为山能集团在新疆分部的龙…

如何为海量计数场景设计缓存体系?no.34

计数常规方案 计数服务在互联网系统中非常常见&#xff0c;用户的关注粉丝数、帖子数、评论数等都需要进行计数存储。计数的存储格式也很简单&#xff0c;key 一般是用户 uid 或者帖子 id 加上后缀&#xff0c;value 一般是 8 字节的 long 型整数。 最常见的计数方案是采用缓存…

常见的100个Shell命令,超级实用!

在大多数的Linux和Unix系统、及其他类Unix系统中&#xff0c;Shell是用户与操作系统内核交互的主要方式。作为一种强大的命令行解释器&#xff0c;它也支持编程功能&#xff0c;用户可以写脚本来处理各种任务。 熟悉shell脚本&#xff0c;首先要对shell指令熟悉&#xff0c;今…

Vue3学习-用 vite@latest 初始化项目后,遇到无法识别 .vue 文件

引入app界面遇到 我的解决方案 1.根目录创建 env.d.ts&#xff0c;添加 declare module "*.vue" {import type { DefineComponent } from "vue"const vueComponent: DefineComponent<{}, {}, any>export default vueComponent }2.在 tsconfig.json…

基于ARM|DSP+FPGA+NVIDIA AI平台的摄像头ISP图像画质调试定制服务

基本框架及算法介绍 ISP(Image Signal Processor)&#xff0c;即图像处理&#xff0c;主要作用是对前端图像传感器输出的信号做后期处理&#xff0c;主要功能有线性纠正、噪声去除、坏点去除、内插、白平衡、自动曝光控制等&#xff0c;依赖于ISP才能在不同的光学条件下都…

scroll-snap-type——有滚动容器下吸附至吸附点的严格程度——css基础

scroll-snap-type有滚动容器下吸附至吸附点的严格程度&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type 此属性不为吸附点指定任何确切的动画或运行规律&#xff0c;留待用户代理处理。 //不吸附 scroll-snap-type:none; //表示吸附轴的关键字…

IPD在卷烟工业企业研发管理中应用

一、 什么是IPD IPD是Integrated Product Development几个英文单词的缩写&#xff0c;译成汉语就是“集成产品研发”&#xff0c;是上世纪九十年代以来世界上盛行的企业产品研发管理的成功模式。下文中汉捷咨询对IPD的由来进行分享。 最先将IPD付诸实践的是美国IBM公司。1992…

AI绘图副业创收,热门擦边变现赛道怎么玩?网友:瑟瑟才是人类前进的动力!

大家好&#xff0c;我是设计师阿威 今天给大家介绍一个用 AI 搞擦边的变现赛道 而且可以说是0 成本变现的 现在真的越来越多的人都想 0 成本变现&#xff0c;那么 0 成本到底能不能变现&#xff0c;变现的上下限又是多少&#xff1f; 今天这个案例就可以很好的进行说明 可以…

路由引入实验(华为)

思科设备参考&#xff1a;路由引入实验&#xff08;思科&#xff09; 技术简介 路由引入技术在网络通信中起着重要的作用&#xff0c;能够实现不同路由协议之间的路由传递&#xff0c;并在路由引入时部署路由控制&#xff0c;实现路径或策略的控制 实验目的 不同的路由协议之…

python web自动化(Pytest实战)

1.UnitTest框架与Pytest框架对⽐ 1&#xff09; unittest框架介绍 Unittest则是Python语⾔的标准单元测试框架。 Unittest⽀持⾃动化测试&#xff0c;测试⽤例的初 始化、关闭和测试⽤例的聚合等功能&#xff0c;它有⼀个很重要的特性&#xff…