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中对应的属性
相关文章:
2025/1/21 学习Vue的第四天
睡觉。 --------------------------------------------------------------------------------------------------------------------------------- 11.Object.defineProperty 1.在我们之前学习JS的时候,普通得定义一个对象与属性。 <!DOCTYPE html> <h…...
云计算、AI与国产化浪潮下DBA职业之路风云变幻,如何谋破局启新途?
引言 在近日举办的一场「云和恩墨大讲堂」直播栏目中,云和恩墨联合创始人李轶楠、副总经理熊军和欧冶云商数据库首席薛晓刚共同探讨了DBA的现状与未来发展。三位专家从云计算、人工智能、国产化替代等多个角度进行了深入的分析和探讨,为从业者提供了宝贵…...
Linux内核编程(二十一)USB驱动开发-键盘驱动
一、驱动类型 USB 驱动开发主要分为两种:主机侧的驱动程序和设备侧的驱动程序。一般我们编写的都是主机侧的USB驱动程序。 主机侧驱动程序用于控制插入到主机中的 USB 设备,而设备侧驱动程序则负责控制 USB 设备如何与主机通信。由于设备侧驱动程序通常与…...
模拟算法习题篇
在算法中,模拟是一种通过计算机程序来模拟现实世界中的过程或系统行为的方法。它的核心思想是根据题目给定的规则和逻辑,按照步骤细致地重现事件的发展流程,从而获得最终结果。 解题时如何使用模拟算法: 理解题目规则:…...
蓝桥杯真题 - 翻转 - 题解
题目链接:https://www.lanqiao.cn/problems/3520/learning/ 个人评价:难度 1 星(满星:5) 前置知识:无 整体思路 贪心,除了第一位跟最后一位,其它字符,每当 S [ i ] ≠…...
IP属地与视频定位位置不一致:现象解析与影响探讨
在数字化时代,IP属地和视频定位位置已成为我们获取网络信息、判断内容真实性的重要依据。然而,有时我们会发现,某些视频内容中展示的定位位置与其发布者的IP属地并不一致。这种不一致现象引发了广泛的关注和讨论。本文旨在深入剖析IP属地与视…...
管道符、重定向与环境变量
个人博客站—运维鹿: http://www.kervin24.top CSDN博客—做个超努力的小奚: https://blog.csdn.net/qq_52914969?typeblog 一、重定向 将命令和文件结合 标准输入重定向(STDIN,文件描述符为0):默认从键盘输入&am…...
可扩展性设计架构模式——开闭原则
1. 概述 在架构设计中,遵循开闭原则(Open/Closed Principle, OCP),代码应该“对扩展开放,对修改关闭”是实现可扩展性的关键。这个原则指导我们设计系统时,应使其对新增功能开放,而对现有代码的修改封闭。这…...
算法随笔_17: 回文数
上一篇: 算法随笔_16: 找出第k小的数对距离-CSDN博客 题目描述如下: 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向左&…...
计算机的错误计算(二百一十九)
摘要 大模型能确定 sin(2.6^10) 的符号吗?实验表明,大模型的计算、推理均有问题。另外,结论也是错的。 前面讨论的内容为自变量是 2.6^100的正弦,本节讨论自变量为 2.6^10的正弦(对于某些大模型,2.6^100似…...
React进阶之高阶组件HOC、react hooks、自定义hooks
React高级 高阶组件 HOC属性代理反向继承属性代理和反向继承的区别实例实例一实例二 HooksHooks APIuseState:useEffect:useLayoutEffect:useRef:useContext:useReducer:useMemouseCallback 自定义Hooks 拓展ÿ…...
【Pytest】基础到高级功能的理解使用
文章目录 第一部分:Pytest 简介1.1 什么是 Pytest?1.2 Pytest 的历史1.3 Pytest 的核心概念1.4 Pytest 的特点1.5 为什么选择 Pytest? 第二部分:Pytest 的基本使用2.1 安装 Pytest2.2 编写第一个测试用例2.2.1 创建一个简单的测试…...
RHCE实验详解
目录 实验分析 环境拓扑结构 项目需求 主机环境描述 实验步骤 一、密钥互信和主机名更改 二、DNS 三、NGINX 四、MARIADB 五、NFS 六、NTP 七、论坛服务 结果展示及痛点解答 实验分析 环境拓扑结构 项目需求 1. 172.25.250.101 主机上的 Web 服务要求提供 www.ex…...
备赛蓝桥杯之第十五届职业院校组省赛第二题:分享点滴
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题࿰…...
MyBatis 注解开发详解
MyBatis 注解开发详解 MyBatis 支持使用注解来进行数据库操作。注解方式将 SQL 语句直接写在 Java 接口中,通过注解来完成 CRUD(增删改查)操作,省去了使用 XML 配置的繁琐步骤。这种方式适合简单项目或快速原型开发,因…...
Kivy App开发之UX控件VideoPlayer视频播放
kivy使用VideoPlayer控件实现视频播放,可以控制视频的播放,暂停,音量调节等功能。 在使用VideoPlayer视频播放器时,可以参考下表属性来设置其样式和触发事件。 属性说明source视频路径,默认为空state视频状态,值play,pause,stop,默认为stopthumbnail显示视频的缩略图…...
简单排序算法
异或运算及异或运算实现的swap方法 ^(异或): ^运算是计算机中的位运算,运算规则为相同为0,不同为1(也被称为无进位相加)。位运算处理效率比常规运算符效率更高。 异或运算遵循的法则: 0^N N N^N 0 异或运算…...
C语言初阶牛客网刷题——JZ17 打印从1到最大的n位数【难度:入门】
1.题目描述 牛客网OJ题链接 题目描述: 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3,则打印出 1、2、3 一直到最大的 3 位数 999。 用返回一个整数列表来代替打印n 为正整数,0 < n < 5 示例1 输入&…...
基于springboot+vue的校园二手物品交易系统的设计与实现
开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…...
开发环境搭建-2:配置 python 运行环境(使用 uv 管理 python 项目)
在 WSL 环境中配置:WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 UV 介绍 uv软件官网(github 需要梯子,没错这个软件的官网真就是 github 页面):https://github.com/astral-sh/uv 中文官网(github 需要梯…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...

