MVVM模型

MVVM模型
M模型(Model)对应data中的数据(普通的JS对象)
V视图(View)对应模板(Vue的模板经过解析形成的页面,页面生成的DOM结构)
VMVue实例对象(ViewModel)整个绿色大盒子就是vue缔造的VM实例对象
  1.  图中下方的线是把Model的数据通过Data Bindings数据绑定送到View的模板实例对象上,上方的线是对DOM结构进行监听,若发生数据改动则通过DOM listenersDOM监听器将数据传到Model中。
  2. 简单来说,VM就是把一堆Model中混乱的数据和View的页面结构之间做了连接,起到连接作用。
  3. 我们把数据放入Model,通过ViewModel把数据插入页面,这就是VM的作用,至于怎么插入,就是框架的特殊的语法了。且框架会保证,无论以后Mode的数据如何变化,View均自动更新。这就是框架的整体定位。
  4. 所以经常在定义中用vm代替Vue实例,这new的Vue实例即为ViewModel。
    const vm = new Vue({el:'#root',data:{name:'123',address:''456}
    })
  5.  data(Model)的数据最终都会出现在VM身上,而VM身上的所有东西模板View中都可以直接使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2779712.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot3整合Knife4j

前置&#xff1a; 官网&#xff1a;快速开始 | Knife4j gitee&#xff1a;swagger-bootstrap-ui-demo: knife4j 以及swagger-bootstrap-ui 集成框架示例项目 - Gitee.com 1.依赖引入&#xff1a; ps&#xff1a;json处理需要引入相关包 <dependency><groupId>c…

基于Java (spring-boot)的电子商城管理系统

一、项目介绍 &#xff08;1&#xff09;商品管理模块&#xff1a;实现了商品的基本信息录入、图片上传、状态管理等相关功能。 &#xff08;2&#xff09;商品分类模块&#xff1a;实现了分类的增删改查、分类层级管理、商品分类的关联等功能。 &#xff08;3&#xff09;订…

【Unity】实用功能开发(一)实现在UI中用RawImage实时展示3D模型(背景透明,并通过UI防止3D场景遮挡)并可以通过分层完成:游戏中的人物状态展示界面,小地图,人物实时头像状态等功能

有时由于项目效果需要&#xff0c;部分功能的实现受到阻碍&#xff0c;这里收集一些已实现的思路和方法&#xff0c;每次会记录大致需求和遇到的问题&#xff0c;如果有更好的想法&#xff0c;欢迎评论区讨论&#xff01;&#xff01;&#xff01; 目录 功能描述&#xff1a;…

Mac 版 Excel 和 Windows 版 Excel的区别

Excel是一款由微软公司开发的电子表格程序&#xff0c;广泛应用于数据处理、分析和可视化等领域。它提供了丰富的功能和工具&#xff0c;包括公式、函数、图表和数据透视表等&#xff0c;帮助用户高效地处理和管理大量数据。同时&#xff0c;Excel还支持与其他Office应用程序的…

C#实现矩阵乘法

目录 一、使用的方法 1.矩阵 2.矩阵的乘法原理 二、实例 1.源码 2.生成效果 一、使用的方法 矩阵相当于一个数组&#xff0c;主要用来存储一系列数&#xff0c;例如&#xff0c;mn矩阵是排列在m行和n列中的一系列数&#xff0c;mn矩阵可与一个np矩阵相乘&#xff0c;结果…

Java:集合以及集合进阶 --黑马笔记

一、集合概述和分类 1.1 集合的分类 除了ArrayList集合&#xff0c;Java还提供了很多种其他的集合&#xff0c;如下图所示&#xff1a; 我想你的第一感觉是这些集合好多呀&#xff01;但是&#xff0c;我们学习时会对这些集合进行分类学习&#xff0c;如下图所示&#xff1a;…

中科大计网学习记录笔记(九):DNS

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…

刘知远LLM——神经网络基础

文章目录 神经网络基础基本构成如何训练&#xff1f; Word2Vec例子负采样&#xff1a; 循环神经网络 RNN门控计算单元 GRU长短时记忆网络 LSTM遗忘门输入门输出门双向RNN卷积神经网络 CNNpytorch实战 神经网络基础 基本构成 全称&#xff1a;人工神经网络。启发于生物神经细胞…

【前端web入门第五天】02 盒子模型基础

文章目录: 1.盒子模型的组成 1.1盒子模型重要组成部分1.2 盒子模型-边框线1.3 盒子模型–内边距 1.3.1 盒子模型–内边距-多值写法 1.4 盒子模型–尺寸计算 1.5 盒子模型-版心居中 1.盒子模型的组成 不同组件之间的空白就是盒子模型的功劳 作用:布局网页&#xff0c;摆放盒子…

模型 PMF(产品市场契合度)

系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。产品与市场高度契合。 1 PMF(Product Market Fit)产品市场契合度 的应用 1.1 PMF在创业过程中的应用-Vincy公司的产品PartnerShare 实现PMF需要企业深入了解目标市场的需求和用户的反馈&…

【Java八股面试系列】并发编程-进程与线程

目录 进程 线程 线程和进程的区别 Java线程和操作系统的线程的区别 请简要描述一下进程和线程在Java中的关系&#xff0c;区别及优缺点&#xff1f;​编辑​编辑​编辑 并发和并行的区别 为什么要使用多线程? 线程的生命周期 什么是线程上下文切换? sleep() 方法和…

解决 postman测试接口报404 Not Found

JDK版本&#xff1a;jdk17 IDEA版本&#xff1a;IntelliJ IDEA 2022.1.3 文章目录 问题描述原因分析解决方案 问题描述 当我使用postman测试接口时&#xff0c;报了 404 Not Found 的错误&#xff0c;报错截图如下所示 但我的后端程序中已经定义了该接口&#xff0c;如下所示 …

1898_野火FreeRTOS教程阅读笔记_链表操作

1898_野火FreeRTOS教程阅读笔记_链表操作 全部学习汇总&#xff1a; g_FreeRTOS: FreeRTOS学习笔记 (gitee.com) 新的节点的插入&#xff0c;影响到的是链表中最后一个元素的后继以及当前被插入元素的前驱、后继以及归属属性。具体的操作效果为&#xff1a;新的节点更新自己的前…

第78讲 修改密码

系统管理实现 修改密码实现 前端 modifyPassword.vue&#xff1a; <template><el-card><el-formref"formRef":model"form":rules"rules"label-width"150px"><el-form-item label"用户名&#xff1a;&quo…

8种基本类型的包装类(与String的转换)

java针对8种基本数据类型&#xff0c;定义了相应的引用类型&#xff1a;包装类(封装类)&#xff0c;有了类的特点&#xff0c;就能调用类中的方法&#xff0c;java才是真正的面向对象。 基本数据类型 包装类byte Byteshort Shortint Integerlong Longfloat Floa…

HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定

本文 我们还是来说 两个 harmonyos 状态管理的装饰器 Observed与ObjectLink 他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的 之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化 这里 我们模拟一个类数据结构 class Person{name:…

SpringCloud-微服务概述、SpringCloud入门概述、服务提供与消费

1.学习前言 1.1 学习前提 熟练使用SpringBoot 微服务快速开发框架了解过Dubbo Zookeeper 分布式基础电脑配置内存不低于8G 1.2 文章大纲 Spring Cloud 五大组件 服务注册与发现——Netflix Eureka负载均衡&#xff1a; ​ 客户端负载均衡——Netflix Ribbon ​ 服务端负载…

分享88个表单按钮JS特效,总有一款适合您

分享88个表单按钮JS特效&#xff0c;总有一款适合您 88个表单按钮JS特效下载链接&#xff1a;https://pan.baidu.com/s/1v-qcl8bv2kxZ8a98Xo9UAg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

Java学习第十一节之命令行传参和断更原因

package method;public class Demo03 {public static void main(String[] args) {//args.length数组长度for (int i 0; i < args.length; i) {System.out.println("args[" i "]:"args[i]);}}}为什么没更新了&#xff1f; 家里有长辈生病了不好在医院照…

FreeRTOS.chg脚本出现意外状态

PE代码生成的时候遇到这么个问题 警报如下 Description Resource Path Location Type ERROR: Unexpected status of script: Beans\FreeRTOS\FreeRTOS.chg, please contact Freescale support. M18_BMCU FreeRTOS Processor Expert Problem 意思就是这个脚本文件有问题&…