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

Vue 07 Vue中的数据代理

news 2026/4/6 5:42:45

通过数据代理，我可以方便的使用vm.属性，修改data中的属性

什么是数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
我们修改obj2的x属性，其实修改的是obj的x属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>何为数据代理</title></head><body><!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--><script type="text/javascript" >let obj = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})</script></body>
</html>

Vue中的数据代理

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue中的数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。--><!-- 准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',address:'宏福科技园'}})</script>
</html>

相关文章：

Vue 07 Vue中的数据代理

通过数据代理&#xff0c;我可以方便的使用vm.属性&#xff0c;修改data中的属性 什么是数据代理 数据代理&#xff1a;通过一个对象代理对另一个对象中属性的操作&#xff08;读/写&#xff09; 我们修改obj2的x属性&#xff0c;其实修改的是obj的x属性 <!DOCTYPE html&…...

编程日记 2023/9/25 8:28:51

Foxit PDF SDK Windows 9.1 Crack

Foxit PDF SDK 变更日志 Windows/Linux/Mac 2023 年 8 月 新功能/增强功能 在开始签名之前设置外观。支持使用共享字典添加签名。允许在调用 Signature::StartSign() 之前增量保存文档。在签名前修改现有未签名分页印章签名的外观。支持使用共享字典添加分页签名。忽略全角…...

编程日记 2023/9/25 8:27:51

UG NX二次开发（C++）-采用NXOpen方法计算体的质心

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 1、前言2、创建一个part文件3、测量质心的NXOpen方法3.1 方法说明3.2 质心测量的代码3.3 测试结果1、前言 在UG NX二次开发过程中，测量是一个很必要的功能，比如测量距离、角度、面的体积、边长、…...

编程日记 2023/9/25 8:26:50

Java代码审计17之fastjson反序列化漏洞(2)

文章目录 1、类加载与反射调用1.1、类加载1.2、测试代码1.3、通过类的加载和反射调用evil类 2、Fastjson TemplatesImpl链调试2.1、链路总览2.2、调试构造利用链 3、fastjson反序列化TemplatesImpl 利⽤3.1、开启 Feature.SupportNonPublicField 得作用3.2、构造利用payload3.3…...

编程日记 2023/9/25 8:25:47

Fork/Join 框架是干什么的？

Fork/Join框架是Java中用于并行计算的一个重要工具，它旨在简化多线程编程，特别适用于分治任务的并行执行。Fork/Join框架的主要目标是提高多核处理器上任务的并行性，从而加速计算。 Fork/Join框架的核心概念包括以下几个要点： 分治策略：Fork/Join框架基于分治策略，将一个…...

编程日记 2023/9/25 8:24:44

电子信息工程专业课复习知识点总结：(五）通信原理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 第一章通信系统概述——通信系统的构成、各部分性质、性能指标1.通信系统的组成&#xff1f;2.通信系统的分类&#xff1f;3.调制、解调是什么&#xff1f;有什么用…...

编程日记 2023/9/25 8:23:43

LeetCode算法二叉树—二叉树的中序遍历

目录 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; 运行结果&#xff1a; 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&am…...

编程日记 2023/9/25 8:19:40

ubuntu 18.04 中 eBPF samples/bpf 编译

1. history 信息 一次成功编译 bpf 后执行 history 得到的信息&#xff1a; yingzhiyingzhi-Host:~/ex/ex_kernel/linux-5.4$ history1 ls2 mkdir ex3 cd ex4 mkdir ex_kernel5 ls /boot/6 sudo apt install linux-source7 ls /usr/src/8 uname -r9 cd ex_kernel/10…...

编程日记 2023/9/25 8:18:39

新版Chromedriver在哪下载（Chromedriver 116.0.5845.188的寻找之旅）

不知道什么时候Chrome自动升级到116.0.5845.188了&#xff0c;害得我原来的Chromedriver 114无法使用了&#xff0c;无奈之下只好重新去下载。 可寻遍网络&#xff0c;都没找到Chromedriver116的版本。网上大多网友给的下载网址是chromedriver.storage.googleapis.com/index.ht…...

编程日记 2023/9/25 8:17:38

React基础知识点

1、简述什么是React&#xff08;概念&#xff09;&#xff1f; React是Facebook开发的一款用于构建用户界面的JS库。React一般被采用作为MVC中的V层&#xff0c;它不依赖其他任何的库&#xff0c;因此在开发中&#xff0c;可以与任何其他的库集成使用&#xff0c;包括Jquery等…...

编程日记 2023/9/25 8:16:37

linux用户和权限命令学习记录

文章目录 版权声明root用户&#xff08;超级管理员&#xff09;su和exit命令sudo命令为普通用户配置sudo认证 用户、用户组管理用户组管理getent命令 查看权限控制认知权限信息 修改权限控制chmod修改文件、文件夹的权限权限的数字序号chown修改所属用户、用户组 版权声明 本博…...

编程日记 2023/9/25 8:15:35

React（react18）中组件通信05——redux ➕ react-redux（含数据共享）

React&#xff08;react18&#xff09;中组件通信05——redux ➕ react-redux&#xff08;含数据共享&#xff09; 1. 前言1.1 React中组件通信的其他方式1.2 介绍React-Redux1.2.1 简单介绍React-Redux1.2.2 官网 1.3 安装react-redux 2. 简单改写redux的例子2.1 提供store2.2…...

编程日记 2023/9/25 8:14:34

字符函数和字符串函数（1）

前言 C语言中对字符和字符串的处理很是频繁&#xff0c;但是C语言本身是没有字符串类型的&#xff0c;字符串通常放在 常量字符串 中或者 字符数组 中。 字符串常量 适用于那些对它不做修改的字符串函数. 1.求字符串长度 strlen 1.1 strlen size_t strlen ( const char * s…...

编程日记 2023/9/25 8:11:30

Visual Studio Code从GIT拉取vue项目并运行

安装Visual Studio Code 安装GIT 安装node.js&#xff0c;配置好环境变量 拉取项目 文章一 文章二 运行项目 文章一 提交代码 文章一...

编程日记 2023/9/25 8:09:29

【知识分享】Java获取全年每个月的有几周且每周是几号到几号

加哥本周给大家分享一期怎么用java把全年每个月有几周&#xff0c;本周是几号到几号的工具类。便于大家根据需求获取想要的形式进行改造。话不多说&#xff0c;直接给大家上代码。 package com.techfantasy.common.utils; import com.techfantasy.common.entity.DateRange; i…...

编程日记 2023/9/25 8:08:27

学信息系统项目管理师第4版系列11_信息安全管理

1. 信息安全基础 1.1. 保密性(Confidentiality&#xff09; 1.1.1. 信息不被未授权者知晓的属性 1.1.2. 确保信息不暴露给未授权的实体或进程 1.2. 完整性(Integrity) 1.2.1. 信息是正确的、真实的、未被篡改的、完整无缺的属性 1.2.2. 只有得到允许的人才能修改数据&…...

编程日记 2023/9/25 8:05:25

sql注入原理分析

...

编程日记 2023/9/25 8:03:23

Mac磁盘空间满了怎么办？Mac如何清理磁盘空间

你是不是发现你的Mac电脑存储越来越满&#xff0c;甚至操作系统本身就占了100多G的空间&#xff1f;这不仅影响了电脑的性能&#xff0c;而且也让你无法存储更多的重要文件和软件。别担心&#xff0c;今天这篇文章将告诉你如何清除多余的文件&#xff0c;让你的Mac重获新生。 一…...

编程日记 2023/9/25 8:02:22

能ping通但无法上网的问题

大家好&#xff0c;今天我要和大家分享一下当你的IP地址能够成功 ping 通&#xff0c;却无法上网时该如何解决这个问题。这是一个相当常见的情况&#xff0c;在网络故障排查中经常遇到。别担心&#xff0c;我将为你揭开这个谜题&#xff0c;提供一些解决方案和技巧。 首先&…...

编程日记 2023/9/25 8:01:21

仿制 Google Chrome 的恐龙小游戏

通过仿制 Google Chrome 的恐龙小游戏&#xff0c;我们可以掌握如下知识点&#xff1a; 灵活使用视口单位掌握绝对定位JavaScript 来操作 CSS 变量requestAnimationFrame 函数的使用无缝动画实现 页面结构 实现页面结构 通过上述的页面结构我们可以知道&#xff0c;此游戏中…...

编程日记 2023/9/25 8:00:21

SDXL 1.0电影级绘图工坊效果展示：1152x896竖版在手机端全屏展示效果

SDXL 1.0电影级绘图工坊效果展示&#xff1a;1152x896竖版在手机端全屏展示效果 1. 惊艳效果开场&#xff1a;手机端全屏观影体验 想象一下&#xff0c;在手机上打开一张AI生成的图片&#xff0c;画面瞬间充满整个屏幕——没有黑边&#xff0c;没有压缩失真&#xff0c;就像在…...

编程新知 2026/4/6 5:26:17

嵌入式 AI 助手的三层意图识别架构：如何在“快、准、稳“之间取得平衡

背景 我在开发一个项目协同平台的嵌入式 AI 助手。它不是独立的 chatbot&#xff0c;而是嵌在业务页面里的——用户可以在首页、项目详情页、任务抽屉等不同位置唤起它&#xff0c;用自然语言完成任务查询、创建、删除等操作。 和通用对话 AI 不同&#xff0c;这个助手有两个硬…...

编程新知 2026/4/6 4:20:40

resume-cli实际案例分享：成功求职者的简历配置终极指南

resume-cli实际案例分享&#xff1a;成功求职者的简历配置终极指南 【免费下载链接】resume-cli CLI tool to easily setup a new resume &#x1f4d1; 项目地址: https://gitcode.com/gh_mirrors/re/resume-cli resume-cli是一款基于JSON Resume标准的命令行工具&…...

编程新知 2026/4/6 3:30:30

seL4微内核技术演进：下一代安全内核的完整发展路线图指南

seL4微内核技术演进&#xff1a;下一代安全内核的完整发展路线图指南 【免费下载链接】seL4 The seL4 microkernel 项目地址: https://gitcode.com/gh_mirrors/se/seL4 seL4微内核作为全球首个形式化验证的安全操作系统内核&#xff0c;正引领着安全关键系统的发展方向。…...

编程新知 2026/4/6 3:28:27

深入解析Kubernetes中的Custom Resource Definitions（CRD）：构建云原生“自定义积木”的终极武器

摘要Custom Resource Definition&#xff08;CRD&#xff09;是Kubernetes扩展API的核心机制&#xff0c;它允许用户在不修改Kubernetes核心代码的情况下&#xff0c;向集群中注入自定义的资源类型。自Kubernetes 1.7引入以来&#xff0c;CRD已成为云原生生态系统的基石技术&am…...

编程新知 2026/4/6 2:24:25

在AutoDL云平台高效部署YOLO训练：从零到一的实战避坑指南

1. 为什么选择AutoDL跑YOLO训练&#xff1f; 第一次接触YOLO目标检测项目时&#xff0c;我像大多数开发者一样被本地显卡性能劝退。直到发现AutoDL这个云GPU平台&#xff0c;才真正体会到什么叫"用多少付多少"的灵活。相比动辄上万的游戏显卡&#xff0c;AutoDL上每小…...

编程新知 2026/4/6 1:58:09

OpenClaw模型微调：gemma-3-12b-it针对自动化任务的专项优化

OpenClaw模型微调&#xff1a;gemma-3-12b-it针对自动化任务的专项优化 1. 为什么需要专项优化&#xff1f; 当我第一次将OpenClaw接入gemma-3-12b-it模型时&#xff0c;发现了一个有趣的现象&#xff1a;这个号称"指令优化"的模型在处理简单问答时表现优异&#x…...

编程新知 2026/4/6 0:30:57

5个突破边界技巧：OpenSpeedy游戏变速工具深度优化指南

5个突破边界技巧&#xff1a;OpenSpeedy游戏变速工具深度优化指南 【免费下载链接】OpenSpeedy &#x1f3ae; An open-source game speed modifier. 项目地址: https://gitcode.com/gh_mirrors/op/OpenSpeedy 副标题&#xff1a;如何通过用户态Hook技术实现游戏帧率自由…...

编程新知 2026/4/5 23:52:19

DSI3协议四大模式（CRM/PDCM/BDM/DM）全解析：从汽车胎压监测到电池管理，看它如何工作

DSI3协议四大模式深度解析&#xff1a;从胎压监测到电池管理的实战应用 汽车电子系统正经历着从分布式架构向集中式控制的转型&#xff0c;而DSI3&#xff08;Distributed System Interface 3&#xff09;协议凭借其独特的单线通信设计&#xff0c;正在成为连接各类车载传感器的…...

编程新知 2026/4/5 23:36:04

AI率80%+送去降AI工具处理，3款结果对比

这篇文章记录的是一个横向测试&#xff1a;找了几篇AI率都在80%以上的论文&#xff0c;分别送去嘎嘎降AI、比话降AI、率零处理&#xff0c;然后统一在知网检测&#xff0c;看最终结果。 测试设计 测试论文&#xff08;4篇&#xff09;&#xff1a; 编号专业字数知网AI率&…...

编程新知 2026/4/5 22:33:05