当前位置： 首页 > news >正文

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

news 2025/7/14 2:44:44

睡觉。

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

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中对应的属性

相关文章：

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

睡觉。 --------------------------------------------------------------------------------------------------------------------------------- 11.Object.defineProperty 1.在我们之前学习JS的时候&#xff0c;普通得定义一个对象与属性。 <!DOCTYPE html> <h…...

编程日记 2025/1/23 18:18:31

云计算、AI与国产化浪潮下DBA职业之路风云变幻，如何谋破局启新途？

引言 在近日举办的一场「云和恩墨大讲堂」直播栏目中&#xff0c;云和恩墨联合创始人李轶楠、副总经理熊军和欧冶云商数据库首席薛晓刚共同探讨了DBA的现状与未来发展。三位专家从云计算、人工智能、国产化替代等多个角度进行了深入的分析和探讨&#xff0c;为从业者提供了宝贵…...

编程日记 2025/1/23 18:15:28

Linux内核编程（二十一）USB驱动开发-键盘驱动

一、驱动类型 USB 驱动开发主要分为两种&#xff1a;主机侧的驱动程序和设备侧的驱动程序。一般我们编写的都是主机侧的USB驱动程序。 主机侧驱动程序用于控制插入到主机中的 USB 设备&#xff0c;而设备侧驱动程序则负责控制 USB 设备如何与主机通信。由于设备侧驱动程序通常与…...

编程日记 2025/1/23 18:13:25

模拟算法习题篇

在算法中&#xff0c;模拟是一种通过计算机程序来模拟现实世界中的过程或系统行为的方法。它的核心思想是根据题目给定的规则和逻辑&#xff0c;按照步骤细致地重现事件的发展流程&#xff0c;从而获得最终结果。 解题时如何使用模拟算法&#xff1a; 理解题目规则&#xff1a;…...

编程日记 2025/1/23 18:12:22

蓝桥杯真题 - 翻转 - 题解

题目链接&#xff1a;https://www.lanqiao.cn/problems/3520/learning/ 个人评价&#xff1a;难度 1 星&#xff08;满星&#xff1a;5&#xff09; 前置知识&#xff1a;无 整体思路 贪心&#xff0c;除了第一位跟最后一位&#xff0c;其它字符&#xff0c;每当 S [ i ] ≠…...

编程日记 2025/1/23 18:09:16

IP属地与视频定位位置不一致：现象解析与影响探讨

在数字化时代&#xff0c;IP属地和视频定位位置已成为我们获取网络信息、判断内容真实性的重要依据。然而&#xff0c;有时我们会发现&#xff0c;某些视频内容中展示的定位位置与其发布者的IP属地并不一致。这种不一致现象引发了广泛的关注和讨论。本文旨在深入剖析IP属地与视…...

编程日记 2025/1/23 18:08:15

管道符、重定向与环境变量

个人博客站—运维鹿: http://www.kervin24.top CSDN博客—做个超努力的小奚&#xff1a; https://blog.csdn.net/qq_52914969?typeblog 一、重定向 将命令和文件结合 标准输入重定向&#xff08;STDIN&#xff0c;文件描述符为0&#xff09;&#xff1a;默认从键盘输入&am…...

编程日记 2025/1/23 18:07:14

可扩展性设计架构模式——开闭原则

1. 概述 在架构设计中&#xff0c;遵循开闭原则&#xff08;Open/Closed Principle, OCP&#xff09;,代码应该“对扩展开放&#xff0c;对修改关闭”是实现可扩展性的关键。这个原则指导我们设计系统时&#xff0c;应使其对新增功能开放&#xff0c;而对现有代码的修改封闭。这…...

编程日记 2025/1/23 18:05:12

算法随笔_17: 回文数

上一篇: 算法随笔_16: 找出第k小的数对距离-CSDN博客 题目描述如下: 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&…...

编程日记 2025/1/23 18:03:09

计算机的错误计算（二百一十九）

摘要 大模型能确定 sin(2.6^10) 的符号吗&#xff1f;实验表明&#xff0c;大模型的计算、推理均有问题。另外&#xff0c;结论也是错的。 前面讨论的内容为自变量是 2.6^100的正弦&#xff0c;本节讨论自变量为 2.6^10的正弦&#xff08;对于某些大模型&#xff0c;2.6^100似…...

编程日记 2025/1/23 18:02:08

React进阶之高阶组件HOC、react hooks、自定义hooks

React高级 高阶组件 HOC属性代理反向继承属性代理和反向继承的区别实例实例一实例二 HooksHooks APIuseState&#xff1a;useEffect&#xff1a;useLayoutEffect&#xff1a;useRef&#xff1a;useContext&#xff1a;useReducer:useMemouseCallback 自定义Hooks 拓展&#xff…...

编程日记 2025/1/23 17:58:01

【Pytest】基础到高级功能的理解使用

文章目录 第一部分&#xff1a;Pytest 简介1.1 什么是 Pytest&#xff1f;1.2 Pytest 的历史1.3 Pytest 的核心概念1.4 Pytest 的特点1.5 为什么选择 Pytest&#xff1f; 第二部分&#xff1a;Pytest 的基本使用2.1 安装 Pytest2.2 编写第一个测试用例2.2.1 创建一个简单的测试…...

编程日记 2025/1/23 17:57:00

RHCE实验详解

目录 实验分析 环境拓扑结构 项目需求 主机环境描述 实验步骤 一、密钥互信和主机名更改 二、DNS 三、NGINX 四、MARIADB 五、NFS 六、NTP 七、论坛服务 结果展示及痛点解答 实验分析 环境拓扑结构 项目需求 1. 172.25.250.101 主机上的 Web 服务要求提供 www.ex…...

编程日记 2025/1/23 17:55:59

备赛蓝桥杯之第十五届职业院校组省赛第二题：分享点滴

提示&#xff1a;本篇文章仅仅是作者自己目前在备赛蓝桥杯中&#xff0c;自己学习与刷题的学习笔记&#xff0c;写的不好&#xff0c;欢迎大家批评与建议 由于个别题目代码量与题目量偏大&#xff0c;请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

编程日记 2025/1/23 17:54:57

MyBatis 注解开发详解

MyBatis 注解开发详解 MyBatis 支持使用注解来进行数据库操作。注解方式将 SQL 语句直接写在 Java 接口中&#xff0c;通过注解来完成 CRUD&#xff08;增删改查&#xff09;操作&#xff0c;省去了使用 XML 配置的繁琐步骤。这种方式适合简单项目或快速原型开发&#xff0c;因…...

编程日记 2025/1/23 17:52:55

Kivy App开发之UX控件VideoPlayer视频播放

kivy使用VideoPlayer控件实现视频播放，可以控制视频的播放，暂停，音量调节等功能。 在使用VideoPlayer视频播放器时，可以参考下表属性来设置其样式和触发事件。 属性说明source视频路径，默认为空state视频状态，值play，pause，stop，默认为stopthumbnail显示视频的缩略图…...

编程日记 2025/1/23 17:48:47

简单排序算法

异或运算及异或运算实现的swap方法 ^(异或): ^运算是计算机中的位运算&#xff0c;运算规则为相同为0&#xff0c;不同为1&#xff08;也被称为无进位相加&#xff09;。位运算处理效率比常规运算符效率更高。 异或运算遵循的法则&#xff1a; 0^N N N^N 0 异或运算…...

编程日记 2025/1/23 17:41:38

C语言初阶牛客网刷题——JZ17 打印从1到最大的n位数【难度：入门】

1.题目描述 牛客网OJ题链接 题目描述&#xff1a; 输入数字 n&#xff0c;按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3&#xff0c;则打印出 1、2、3 一直到最大的 3 位数 999。 用返回一个整数列表来代替打印n 为正整数&#xff0c;0 < n < 5 示例1 输入&…...

编程日记 2025/1/23 17:38:26

基于springboot+vue的校园二手物品交易系统的设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2025/1/23 17:36:17

开发环境搭建-2：配置 python 运行环境（使用 uv 管理 python 项目）

在 WSL 环境中配置&#xff1a;WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 UV 介绍 uv软件官网&#xff08;github 需要梯子&#xff0c;没错这个软件的官网真就是 github 页面&#xff09;&#xff1a;https://github.com/astral-sh/uv 中文官网&#xff08;github 需要梯…...

编程日记 2025/1/23 17:34:12

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/7/11 8:23:31

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/8 4:49:22

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/10 9:55:26

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/7/12 3:29:59

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/7/10 11:47:38

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/6/16 10:20:03

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/7/10 14:18:52

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/7/10 2:37:58

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/7/13 0:56:41

41道Django高频题整理(附答案背诵版)

解释一下 Django 和 Tornado 的关系&#xff1f; Django和Tornado都是Python的web框架&#xff0c;但它们的设计哲学和应用场景有所不同。 Django是一个高级的Python Web框架&#xff0c;鼓励快速开发和干净、实用的设计。它遵循MVC设计&#xff0c;并强调代码复用。Django有…...

编程新知 2025/7/8 4:41:20