2025/1/21 学习Vue的第四天

睡觉。

---------------------------------------------------------------------------------------------------------------------------------

11.Object.defineProperty

1.在我们之前学习JS的时候,普通得定义一个对象与属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回顾object.defineProperty方法</title>
</head>
<body><script>let Person = {name:'张三',sex:'男',age:18}console.log(Person)</script>
</body>
</html>

我们会发现能够正常输出

2.如果我们想在此写法的对象外面添加属性,应该如何书写?

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回顾object.defineProperty方法</title>
</head>
<body><script>let Person = {name:'张三',sex:'男',age:18    }Object.defineProperty(Person,'address',{value:'黄冈'})console.log(Object.keys(Person))</script>
</body>
</html>

打开控制台我们会发现:额外添加的address属性,不能参与遍历

3.得到对象一系列属性的方法是:

console.log(Object.keys(Person))

并不能得到address属性

4.让我们试着书写遍历的代码看看能不能遍历得到address。使用for in

    for(var key in Person){console.log(Person[key])}

我们发现并没有得到address的值,这说明我们不能控制额外添加的属性值

那么如何控制额外添加的属性呢?

5.如何控制,使得额外添加属性可修改可遍历可删除

   Object.defineProperty(Person,'address',{value:'黄冈',enumerable:true,//控制属性是否可以枚举writable:true,//控制属性是否可以被修改configurable:true//控制属性是否可以被删除})

6.将额外的属性定义在Object外面,再由Object.defineProperty修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回顾object.defineProperty方法</title>
</head>
<body><script>var add ='武汉'let Person = {name:'李四',sex:'男',age:18    }Object.defineProperty(Person,'address',{//     value:'黄冈',//    enumerable:true,//控制属性是否可以枚举//   writable:true,//控制属性是否可以被修改//   configurable:true//控制属性是否可以被删除get(){console.log('有人读取了')return add},set(){console.log('有人修改了')return add}})// for(var key in Person){//     console.log(Person[key])// }console.log(Person)// console.log(Object.keys(Person))</script>
</body>
</html>

12.理解数据代理

通过一个对象代理,对另一个对象中属性的操作

1.让我们使用一个简单的例子来实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>理解数据代理</title>
</head>
<body><script>let A={name1:'苏高阳'}let B={name2:'赵丽颖'}Object.defineProperty(A,'name2',{get(){console.log('读取B')return B.name2},set(value){console.log('修改A')A.name1=value}})</script>
</body>
</html>

2.我们发现通过Object.defineproperty传入一个对象,传入其他对象的属性,可以改变两个对象的属性。

加深了我们对于数据代理的理解。

13.Vue中的数据代理

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作(读写)

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过Object.defineProperty()把 data对象中所有属性添加到vm上。

为每一个添加到vm上的属性,都指定一个getter/setter

在getter/setter内部去操作(读/写)data中对应的属性

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

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

相关文章

深圳市云盟智慧科技有限公司智慧停车管理系统 SQL注入漏洞复现(附脚本)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将尽快处理并删除相关内容。 0x0…

Go Map 源码分析(一)

Go语言中的map是通过哈希表实现的&#xff0c;其底层结构和实现机制如下&#xff1a; 一、hash 结构 hmap结构体&#xff1a;是map的头部结构&#xff0c;主要字段及含义如下&#xff1a; count&#xff1a;表示当前哈希表中的元素数量&#xff0c;与len()函数相对应。flags…

Linux-C/C++--深入探究文件 I/O (上)(文件的管理、函数返回错误、exit()、_Exit()、_exit())

经过上一章内容的学习&#xff0c;相信各位读者对 Linux 系统应用编程中的基础文件 I/O 操作有了一定的认识和理解了&#xff0c;能够独立完成一些简单地文件 I/O 编程问题&#xff0c;如果你的工作中仅仅只是涉及到一些简单文件读写操作相关的问题&#xff0c;其实上一章的知识…

线性回归笔记1-4

matplotlib的scatter功能&#xff1a; plt.scatter(x, y, ssizes, ccolors, cmapviridis, alpha0.6, markero, linewidths2, edgecolorsk, labelRandom Data) sizes np.random.rand(2) * 300 # 生成两个0到300之间的随机数作为大小 sizes np.array([50, 200]) # 第一个点大小…

【机器学习实战中阶】音乐流派分类-自动化分类不同音乐风格

音乐流派分类 – 自动化分类不同音乐风格 在本教程中,我们将开发一个深度学习项目,用于自动化地从音频文件中分类不同的音乐流派。我们将使用音频文件的频率域和时间域低级特征来分类这些音频文件。 对于这个项目,我们需要一个具有相似大小和相似频率范围的音频曲目数据集…

被遮挡QT窗口置顶

问题描述 开发环境&#xff1a;windows QT 需求&#xff1a; 单击托盘将桌面窗口在被遮挡的情况下置顶解决方案 方案1 资料链接 代码实现 Qt::WindowFlags flags windowFlags(); this->setWindowFlags((flags | Qt::WindowStaysOnTopHint)); this->showMaximized();…

Walrus Learn to Earn计划正式启动!探索去中心化存储的无限可能

本期 Learn to Earn 活动将带领开发者和区块链爱好者深入探索 Walrus 的技术核心与实际应用&#xff0c;解锁分布式存储的无限可能。参与者不仅能提升技能&#xff0c;还能通过完成任务赢取丰厚奖励&#xff01;&#x1f30a; 什么是 Walrus&#xff1f; 数据主权如今正成为越…

git 常用命令 git archive

git archive 是 Git 中用于创建一个包含指定提交或分支中所有文件的归档文件&#xff08;如 .tar 或 .zip&#xff09;的命令。这个命令非常适合用于分发项目快照、备份代码库或导出特定版本的文件。 git archive --formatzip --outputproject.zip HEAD …

Excel 技巧15 - 在Excel中抠图头像,换背景色(★★)

本文讲了如何在Excel中抠图头像&#xff0c;换背景色。 1&#xff0c;如何在Excel中抠图头像&#xff0c;换背景色 大家都知道在PS中可以很容易抠图头像&#xff0c;换背景色&#xff0c;其实Excel中也可以抠简单的图&#xff0c;换背景色。 ※所用头像图片为百度搜索&#x…

持续升级《在线写python》小程序的功能,文章页增加一键复制功能,并自动去掉html标签

增加复制按钮后的界面是这样的 代码如下&#xff1a; <template><view><x-header></x-header><view class"" v-if"article_info"><view class"kuai bgf"><view class"ac fs26"><img sr…

使用 Babylon.js 开发时如何通过 CSS 实现 UI 自适应

本文将介绍如何在 Babylon.js 开发中&#xff0c;通过预先定义的 CSS 文件实现 UI 的自适应布局&#xff0c;确保 UI 能够根据 Canvas 元素的尺寸动态调整。 场景描述 假设我们已经使用 HTML 和 CSS 构建了 Babylon.js 的 UI 界面&#xff0c;并且所有样式都定义在 CSS 文件中…

99.5 金融难点通俗解释:市销率(PS)

目录 0. 承前1. 简述&#xff1a;市销率&#xff08;PS&#xff09;2. 比喻&#xff1a;市销率&#xff08;PS&#xff09;2.1 第一步&#xff1a;理解"销售额"2.2 第二步&#xff1a;理解"市场价格"2.3 第三步&#xff1a;理解"市销率" 3. 生活…

FPGA与ASIC:深度解析与职业选择

IC&#xff08;集成电路&#xff09;行业涵盖广泛&#xff0c;涉及数字、模拟等不同研究方向&#xff0c;以及设计、制造、封测等不同产业环节。其中&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;和ASIC&#xff08;专用集成电路&#xff09;是两种重要的芯片类型…

【Linux】Linux入门(三)权限

目录 前提权限概念whoami指令 Linux权限管理文件访问者的分类&#xff08;人&#xff09;file指令权限信息权限的表示方法 chmod指令 更改权限chown指令 修改文件&#xff0c;文件夹所属用户和用户组 权限掩码umask&#xff08;权限掩码&#xff09; 粘滞位 前提 请先看下面这…

蓝桥与力扣刷题(73 矩阵置零)

题目&#xff1a;给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2&…

《探秘鸿蒙Next:非结构化数据处理与模型轻量化的完美适配》

在鸿蒙Next的人工智能应用场景中&#xff0c;处理非结构化数据并使其适配模型轻量化需求是一项关键且具有挑战性的任务。以下是一些有效的方法和策略。 数据预处理 数据清洗&#xff1a;非结构化数据中往往存在噪声、重复和错误数据。对于文本数据&#xff0c;要去除乱码、特殊…

Node.js接收文件分片数据并进行合并处理

前言&#xff1a;上一篇文章讲了如何进行文件的分片&#xff1a;Vue3使用多线程处理文件分片任务&#xff0c;那么本篇文章主要看一下后端怎么接收前端上传来的分片并进行合并处理。 目录&#xff1a; 一、文件结构二、主要依赖1. express2. multer3. fs (文件系统模块)4. pat…

大数据,Hadoop,HDFS的简单介绍

大数据 海量数据&#xff0c;具有高增长率、数据类型多样化、一定时间内无法使用常规软件工具进行捕捉、管理和处理的数据集 合 大数据的特征: 4V Volume : 巨大的数据量 Variety : 数据类型多样化 结构化的数据 : 即具有固定格式和有限长度的数据 半结构化的数据 : 是…

深度强化学习:PPO

深度强化学习算法&#xff1a;PPO 1. Importance Sampling 先说一下什么是采样&#xff1a;对于一个随机变量&#xff0c;我们通常用概率密度函数来描述该变量的概率分布特性。具体来说&#xff0c;给定随机变量的一个取值&#xff0c;可以根据概率密度函数来计算该值对应的概…

Flink底层架构与运行流程

这张图展示了Flink程序的架构和运行流程。 主要组件及功能&#xff1a; Flink Program&#xff08;Flink程序&#xff09;&#xff1a; 包含Program code&#xff08;程序代码&#xff09;&#xff0c;这是用户编写的业务逻辑代码。经过Optimizer / Graph Builder&#xff08…