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.mfbz.cn/a/637545.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

nacos-opera(k8s)安装问题解决

整理一些关于k8s部署nacos出现的一些恶心的问题 网上说其他说的更改数据库连接都未解决。 在用nacos-opera想安装高可用nacos时连接mysql数据库报错: 报错具体项: No DataSource set 具体就是说没找到数据源。 第一个 检查一下nacos连接数据库配置 : 第二个 检查一下数据库…

2024 电工杯高校数学建模竞赛(B题)| 平衡膳食食谱 |建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍团队独辟蹊径&#xff0c;运用负载均衡&#xff0c;多目标规划等强大工具&#xff0c;构建了这一题的详细解答哦&#xff01; 为大家量身打造创新解决方案。小秘籍团队&#xff0c;始终引领着建模问题求解的风潮。 抓紧小秘籍&am…

【MySQL数据库】CRUD 增 删 改 查 超详解,有这一篇就够了!

​ ​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 ⚗️一.CRUD &#x1f9ea;二.新增&#xff08;Create&#xff09; &#x1f9eb;1.基本操作 &#x1f9ec;2.使用SELECT插入 &#x…

169. Majority Element

文章目录 题目描述(简单难度)解法一解法二 位运算摩尔投票法参考文献 题目描述(简单难度) 给一个数组&#xff0c;存在一个数字超过了半数&#xff0c;找出这个数。 解法一 这种计数问题&#xff0c;直接就会想到 HashMap&#xff0c;遍历过程中统计每个数字出现的个数即可。…

Python入门全系列教程(更新中……)

最近辞职了&#xff0c;有点时间&#xff0c;打算写一套Python入门的全系列教程&#xff0c;需要的人欢迎关注蹲守&#xff01;&#xff01;&#xff01; 【Python基础篇】&#xff1a;入门基础知识—轻松踏上编程巅峰&#xff01;" 【Python基础篇】—基本语句详解 【Py…

jenkins插件之xunit

分析测试工具执行的结果&#xff0c;并图形化&#xff0c;比如phpunit&#xff0c;phpstan,可分析junit格式的结果 安装jenkins插件 搜索xunit并安装 项目配置 配置 - Build Steps 您的项目 - 配置 - Build Steps, 新增 Run with timeout 超时时间根据实际情况配置 Build…

unidbg入门笔记

一、unidbg 介绍 unidbg 是凯神 在 2019 年初开源的一个轻量级模拟器&#xff0c;一个基于Java的跨平台解密引擎&#xff0c;专门用于动态分析和逆向工程应用程序。它可以模拟不同CPU架构、操作系统和指令集&#xff0c;从而使用户能够在一个统一的环境中分析各种不同类型的二…

Mac下QT开发环境搭建详细教程

QT Qt是一个跨平台的C应用程序框架&#xff0c;用于开发具有图形用户界面&#xff08;GUI&#xff09;的应用程序&#xff0c;同时也可用于开发非GUI程序&#xff0c;比如控制台工具和服务器。Qt是设计成通用、可移植和高效的&#xff0c;它广泛应用于全球的企业和开发者社区中…

Codigger编码场景介绍(二):驾驶舱场景(Cockpit)

Codigger&#xff0c;一个专为开发人员设计的工具&#xff0c;致力于为不同的开发场景提供最佳的切换体验。Codigger囊括了多种场景&#xff0c;如传统场景、调试场景、设计器场景、驾驶舱场景以及纯净场景等。在上一篇文章中&#xff0c;我们介绍了传统场景模式&#xff0c;今…

宠物空气净化器:过敏星人的终极武器,让猫毛无处藏身~

猫毛过敏者虽畏惧猫毛&#xff0c;但对猫的热爱让他们选择继续养猫。过敏反应通常由猫的皮屑、唾液和尿液中的蛋白质引发&#xff0c;这些颗粒在空气中传播&#xff0c;导致打喷嚏、咳嗽和皮肤红疹等症状。宠物空气净化器&#xff0c;专为去除猫毛、异味和消毒灭菌设计&#xf…

【Vue3】env环境变量的配置和使用(区分cli和vite)

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、env文件二、vue3cli加载env1..env配置2..dev配置&#xff08;其他环境参考&#xff09;3.package.json文件4.使用 三、vue3vite加载e…

AI图片过拟合如何处理?答案就在其中!

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答8 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你解…

STM32-按键控制LED

接上篇LED点亮;http://t.csdnimg.cn/9r6z7 目录 一.硬件设计 二.软件设计 三.完整代码 四.结束语 一.硬件设计 按钮接电源插入PB0引脚,如上图所示 二.软件设计 void key_init() {GPIO_InitTypeDef GPIO_InitStruct;//使能时钟RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIO…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-19.1讲 串口格式化输出printf

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

JVM(5):虚拟机性能分析和故障解决工具概述

1 工具概述 作为一个java程序员&#xff0c;最基本的要求就是用java语言编写程序&#xff0c;并能够在jvm虚拟机上正常运行&#xff0c;但是在实际开发过程中&#xff0c;我们所有的程序由于各种各样的原因&#xff0c;并不是总能够正常运行&#xff0c;经常会发生故障或者程序…

cocos 写 连连看 小游戏主要逻辑(Ts编写)算法总结

cocos官方文档&#xff1a;节点系统事件 | Cocos Creator 游戏界面展示 一、在cocos编译器随便画个页面 展示页面 二、连连看元素生成 2.1、准备单个方块元素&#xff0c;我这里就是直接使用一张图片&#xff0c;图片大小为100x100&#xff0c;描点围为&#xff08;0&#xf…

某钢铁企业数字化转型规划案例(114页PPT)

案例介绍&#xff1a; 该钢铁企业的数字化转型案例表明&#xff0c;数字化转型是钢铁企业应对市场竞争、提高生产效率、降低成本、优化资源配置和降低能耗排放的重要手段。通过引入先进的技术和管理理念&#xff0c;加强员工培训和人才引进&#xff0c;企业可以成功实现数字化…

数据挖掘实战-基于内容协同过滤算法的电影推荐系统

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

轻松上手ClickHouse:ClickHouse入门

引言 在数字化时代&#xff0c;大数据处理和分析已经成为了各行各业不可或缺的一环。而ClickHouse&#xff0c;作为一款高性能的列式数据库管理系统&#xff0c;以其卓越的查询性能和灵活的扩展性&#xff0c;赢得了众多企业和开发者的青睐。本文将带领大家走进ClickHouse的世…

【数组】Leetcode 452. 用最少数量的箭引爆气球【中等】

用最少数量的箭引爆气球 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points &#xff0c;其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴从不同点 完全垂直 地…