Vue 05 MVVM模型

news2024/12/24 2:29:42

MVVM模型

  1. M:模型(Model) :data中的数据
  2. V:视图(View) :模板代码
  3. VM:视图模型(ViewModel):Vue实例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			MVVM模型
						1. M:模型(Model) :data中的数据
						2. V:视图(View) :模板代码
						3. VM:视图模型(ViewModel):Vue实例
			观察发现:
						1.data中所有的属性,最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校名称:{{name}}</h1>
			<h1>学校地址:{{address}}</h1>
			<!-- <h1>测试一下1:{{1+1}}</h1>
			<h1>测试一下2:{{$options}}</h1>
			<h1>测试一下3:{{$emit}}</h1>
			<h1>测试一下4:{{_c}}</h1> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'123',
				address:'123',
			}
		})
		console.log(vm)
	</script>
</html>

{{}}中的内容可以填什么

可以填所有vue实例中的属性
在这里插入图片描述

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

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

相关文章

accesskey_tools AWS红队利用工具:强大的云安全评估和渗透测试工具

一、简介 accesskey_tools是一款专为云环境渗透设计的红队利用工具。本文将介绍accesskey_tools的功能和用途&#xff0c;并探索其在安全评估和渗透测试中的价值和实际应用。 二、工具下载 【点击下载工具】 三、安装依赖 cd aws/aliyun/tencentcloud #进入相应的云服务平…

MySQL数据库描述以及安装使用

一&#xff1a;数据库介绍 数据库 数据库就是用来存储数据的一种特殊文件。 数据库类别 数据库主要分为两种&#xff1a; 关系型数据库RDBMS 非关系型数据库 关系型数据库的主要产品&#xff1a; oracle&#xff1a;在以前的大型项目中使用,银行,电信等项目 mysql&#xff1a;…

工业通讯Modbus简介(一)

写在前面&#xff1a; 昨日雨&#xff0c;在床上睡觉许久&#xff0c;放空身体精神。至傍晚&#xff0c;雨仍淅淅沥沥&#xff0c;拆半年前行李&#xff0c;取煮水锅&#xff0c;欲食火锅。与老王一起&#xff0c;美哉。 今日团建&#xff0c;我队共10个老铁&#xff0c;拔河获…

ES6-匿名函数

匿名函数 没有名字的函数&#xff0c;无法直接使用。 使用方式&#xff1a; 1&#xff09;函数表达式 将匿名函数赋值给一个变量&#xff0c;并且通过变量名称进行调用&#xff0c;我们将这个称为函数表达式 let fn function () {console.log(我是函数表达式)} console.l…

Linux:冯诺依曼系统和操作系统的概念

文章目录 冯诺依曼体系结构冯诺依曼体系的理解 操作系统操作系统的基本定位操作系统的理解1 操作系统的理解2总结 本篇主要总结的是操作系统的基本认知和一些概念 冯诺依曼体系结构 那么上图表示的就是冯诺依曼体系结构&#xff0c;那这个体系结构是什么&#xff1f;为什么要先…

【从0学习Solidity】28. Hash函数解析

【从0学习Solidity】28. Hash函数解析 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xff0c;探索…

Purple-Pi-OH Linux SDK编译手册

一、 SDK下载 1.1 源码下载 在官网下载Purple-Pi-OH的的相关资料以及Linux SDK&#xff1a; 链接&#xff1a;Purple Pi OH-深圳触觉智能科技有限公司 1.2 源码解压 由于SDK打包后体积较大&#xff0c;我们在上传到百度云盘前把SDK包按照4GB大小分割了&#xff0c;因此下载…

【LRU缓存机制】+ 双向链表一些基础操作

文章目录 Tag题目来源题目解读解题方法方法一&#xff1a;哈希表双向链表 知识回顾双向链表的几个基本操作 写在最后 Tag 【哈希表】【双向链表】【设计数据结构】【2023-09-24】 题目来源 146. LRU 缓存 题目解读 LRU 是Least Recently Used的缩写&#xff0c;即最近最少使…

C语言每日一题(4):打印二进制的奇数位和小数位

文章主题&#xff1a;打印二进制的奇数位和小数位&#x1f525;所属专栏&#xff1a;C语言每日一题&#x1f4d7;作者简介&#xff1a;每天不定时更新C语言的小白一枚&#xff0c;记录分享自己每天的所思所想&#x1f604;&#x1f3b6;个人主页&#xff1a;[₽]的个人主页&…

干洗店收银管理软件,洗鞋店收银系统干洗app

干洗店收银管理软件&#xff0c;洗鞋店收银系统干洗app&#xff0c;支持上门取衣服干洗&#xff0c;在手机上下单&#xff0c;预约合适的时间&#xff0c;就会有专员来上门取&#xff0c;当然&#xff0c;送衣服务也是有的&#xff0c;一些价格都标注清楚&#xff0c;有更多的参…

YOLOv5改进系列(24)——替换主干网络之MobileViTv3(移动端轻量化网络的进一步升级)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制 YOLOv5改进系列(2)——添加CBAM注意力机制

Stellar Toolkit for MySQL 9.0 Crack 3in1

面向数据库管理员的 MySQL 工具包 Stellar Toolkit for MySQL是一款三合一软件套件&#xff0c;用于修复损坏的 MySQL 和 MariaDB 数据库、从 MySQL 数据库的 InnoDB 和 MyISAM 表恢复数据以及分析 MySQL 数据库日志文件。该软件还可以以最高的安全性和完整性相互转换 MySQL/Ma…

pycharm中配置torch

在控制台cmd中安装好torch后&#xff0c;在pycharm中使用torch&#xff0c;需要进行简单设置即可。 在pycharm中新建一个工程&#xff0c;在file文件中打开setting 在setting中找到project interpreter编译器 找到conda environment的环境配置&#xff0c;设置好相应的目录 新…

一些框架使用总结

一.力软 1. 菜单相关 1) 页面菜单配置 自己写的页面 都在 src/modules中&#xff0c;基本结构如下图&#xff0c;具体页面在 views 文件夹中 module.js中&#xff0c;code字段需要和文件夹名称对应起来 export default {name: 案例演示模块,code: demo,version: 1.0.0,desc…

外卖霸王餐小程序、H5、公众号版外卖系统源码

最新外卖霸王餐小程序、H5、微信公众号版外卖系统源码、霸王餐美团、饿了么系统&#xff0c;粉丝裂变玩源码下载&#xff0c;外卖cps小程序项目&#xff0c;外卖红包cps带好友返利佣金分销系统程序、饿了么美团联盟源码&#xff0c;外卖cps带分销返利后端源码&#xff0c;基于L…

短视频账号系统源码(saas开发型)

抖音账号|短视频矩阵分发系统 | 多账号管理发布 |MVC架 一、短视频矩阵分发系统是什么&#xff1f; 短视频矩阵分发系统是一种集多账号、平台管理和视频分发于一身的技术运营类saas工具。它可以帮助用户管理多个账号&#xff0c;并将短视频快速传播到这些账号所在的不同平台上…

四川眼科医院孙丰源教授团队为患者拔除1.4cm长“眼中钉”

在户外劳作进行一些危险性的操作时&#xff0c;如果不注意防护&#xff0c;就很容易造成一些意外事件发生。广元的张先生使用割草机除草时&#xff0c;被割草机断裂的锯片击伤了左眼&#xff0c;伤势严重&#xff0c;所幸在孙丰源教授团队的帮助下&#xff0c;及时获得了治疗&a…

【操作系统笔记十】缓存一致性

CPU 核心之间数据如何传播 高速缓存中的值被修改了&#xff0c;那么怎么同步到内存中呢&#xff1f; ① 写直达&#xff08;Write-Through&#xff09;② 写回&#xff08;Write-Back&#xff09; 写直达&#xff08;Write-Through&#xff09; 简单&#xff0c;但是很慢&am…

Zygote Secondary:加速应用启动的未来之路

Zygote Secondary&#xff1a;加速应用启动的未来之路 1. 引言 在现代的移动应用开发中&#xff0c;启动速度和响应性能是用户体验的重要方面。然而&#xff0c;传统的 Android 进程管理方式在启动应用时会出现性能瓶颈&#xff0c;导致启动时间过长和资源占用过多。为了解决…