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

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的时候&#xff0c;普通得定义一个对象与属性。 <!DOCTYPE html> <h…...

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

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

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

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

模拟算法习题篇

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

蓝桥杯真题 - 翻转 - 题解

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

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

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

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

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

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

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

算法随笔_17: 回文数

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

计算机的错误计算(二百一十九)

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

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

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

【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 创建一个简单的测试…...

RHCE实验详解

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

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

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

MyBatis 注解开发详解

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

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

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

简单排序算法

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

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

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

基于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;…...

开发环境搭建-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 需要梯…...

ThinkPad开机嘀嘀响或报2100/2110错误?可能是硬盘松了!自己动手检测与修复指南

ThinkPad开机嘀嘀响或报2100/2110错误&#xff1f;三步排查硬盘接触不良问题ThinkPad用户对那个标志性的开机"嘀嘀"声再熟悉不过——正常情况下它意味着系统自检通过。但当这个声音变成急促的报警音&#xff0c;伴随屏幕上出现"2100 Detection error"或&qu…...

Kerberos身份认证原理与企业级排错实战指南

1. 这不是“另一个登录框”&#xff0c;而是一套精密运转的身份验证齿轮系统很多人第一次听说 Kerberos&#xff0c;是在公司内网登录邮箱或访问内部系统时&#xff0c;看到那个带小盾牌图标的弹窗——“正在使用 Kerberos 协议进行身份验证”。于是下意识觉得&#xff1a;“哦…...

OpenClaw用户如何快速接入Taotoken并开始Agent工作流

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 OpenClaw用户如何快速接入Taotoken并开始Agent工作流 对于使用OpenClaw框架构建AI智能体的开发者而言&#xff0c;快速接入稳定、多…...

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中&#xff0c;30% 并非元件损坏&#xff0c;而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大&#xff0c;很多工程师反复更换元件仍无法解决&#xff0c;最终误判为 “板报废”。​一、PCB 隐性故障核心成因…...

0.2毫秒快速启动的操作系统

在工业控制以及航空航天等核心场景&#xff0c;极速启动就是高可靠系统的生命线。0.2毫秒超快启动搭配硬件看门狗&#xff0c;让设备在掉电重启、异常恢复时瞬时归位&#xff0c;关键任务永不延误&#xff01; https://www.bilibili.com/video/BV11mLY6VERt/?spm_id_from333.1…...

2026年一键生成论文工具对比实测:5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

别再死磕USB HID了!用ESP32的Arduino框架手把手教你实现蓝牙鼠标键盘(附完整代码)

ESP32蓝牙HID实战&#xff1a;零基础打造自定义键盘鼠标 手里那块吃灰的ESP32开发板终于能派上用场了&#xff01;上周我用它做了个无线演示控制器&#xff0c;在会议室里走着就能翻PPT&#xff0c;同事们都问是怎么实现的。其实秘诀就在于ESP32的蓝牙HID功能——不需要任何USB…...

WarcraftHelper终极指南:深度解析魔兽争霸III现代化兼容性解决方案

WarcraftHelper终极指南&#xff1a;深度解析魔兽争霸III现代化兼容性解决方案 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专…...

特定任务需求场景下的过约束并联机构构型设计与控制方法【附代码】

✨ 长期致力于曲面加工、构型综合、运动学和动力学建模、性能评价、多目标优化、滑模控制、鲁棒控制、视觉传感技术研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;…...

基于Max78000与规则引导的音频数据集构建:边缘AI声音识别实战

1. 项目概述&#xff1a;当边缘AI遇见棕榈树里的“窃听者”在边缘计算和物联网设备大行其道的今天&#xff0c;我们常常面临一个核心矛盾&#xff1a;一方面&#xff0c;我们希望设备足够“聪明”&#xff0c;能实时识别并响应特定的声音模式&#xff0c;比如工厂里高压阀门的异…...