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

Vue 07 Vue中的数据代理

news 文章来源：https://blog.csdn.net/Rockandrollman/article/details/133244961 2025/2/8 11:25: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

Redis面试题(五)

文章目录 前言一、使用过 Redis 做异步队列么&#xff0c;你是怎么用的&#xff1f;有什么缺点&#xff1f;二、 什么是缓存穿透&#xff1f;如何避免&#xff1f;什么是缓存雪崩&#xff1f;何如避免&#xff1f;总结 前言 使用过 Redis 做异步队列么&#xff0c;你是怎么用的…...

编程日记 2023/9/25 7:58:19

组队竞赛（int溢出问题）

目录 一、题目 二、代码 &#xff08;一&#xff09;没有注意int溢出 &#xff08;二&#xff09;正确代码 1. long long sum0 2. #define int long long 3. 使用现成的sort函数 一、题目 二、代码 &#xff08;一&#xff09;没有注意int溢出 #include <iostream&g…...

编程日记 2023/9/25 7:57:18

Swift SwiftUI 隐藏键盘

如果仅支持 iOS 15 及更高版本&#xff0c;则可以通过聚焦和取消聚焦来激活和关闭文本字段的键盘。 在最简单的形式中&#xff0c;这是使用 FocusState 属性包装器和 focusable() 修饰符完成的-第一个存储一个布尔值&#xff0c;用于跟踪第二个当前是否被聚焦。 Code struct C…...

编程日记 2023/9/25 7:56:17

Python与数据分析--Pandas-1

目录 1.Pandas简介 2.Series的创建 1.通过数组列表来创建 2.通过传入标量创建 3.通过字典类型来创建 4.通过numpy来创建 3.Series的索引和应用 1. 通过index和values信息 2. 通过切片方法获取信息 4.DataFrame的创建 1.直接创建 2.矩阵方式创建 3.字典类型创建 5.…...

编程日记 2023/9/25 7:53:14

如何完美通过token获取用户信息（springboot）

1. 什么是Token&#xff1f; 身份验证令牌&#xff08;Authentication Token&#xff09;&#xff1a;在身份验证过程中&#xff0c;“token” 可以表示一个包含用户身份信息的令牌。 例如 Token&#xff08;JWT&#xff09;是一种常见的身份验证令牌&#xff0c;它包含用户的…...

编程日记 2023/9/25 7:52:13

2023 “华为杯” 中国研究生数学建模竞赛（B题）深度剖析|数学建模完整代码+建模过程全解全析

华为杯数学建模B题 当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2021年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看研赛的B题呀~&#xff01; 问…...

编程日记 2023/9/25 7:51:11

文件相关工具类

文章目录 1.MultipartFile文件转File2.读取文件(txt、json)3.下载网络文件4.压缩文件 1.MultipartFile文件转File public File transferToFile(MultipartFile multipartFile) { // 选择用缓冲区来实现这个转换即使用java 创建的临时文件 使用 MultipartFile.transferto()…...

编程日记 2023/9/25 7:49:10

18795-2012 茶叶标准样品制备技术条件

声明 本文是学习GB-T 18795-2012 茶叶标准样品制备技术条件. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了各类茶叶(除再加工茶)标准样品的制备、包装、标签、标识、证书和有效期。 本标准适用于各类茶叶(除再加工茶)感官品质…...

编程日记 2023/9/25 7:48:09

C++11互斥锁的使用

是C11标准库中用于多线程同步的库&#xff0c;提供互斥锁(mutex)及其相关函数。 以下是一些基本的使用示例&#xff1a; 1.创建和销毁互斥锁 #include <mutex>std::mutex mtx;2.加锁 std::lock_guard<std::mutex> lock(mtx); // 加锁 // 或者 mtx.lock(); //…...

编程日记 2023/9/25 7:46:06

unity 桌面程序

using System; using System.Collections; using System.Collections.Generic; using System.Runtime.InteropServices; using UnityEngine; public class chuantou : MonoBehaviour { [DllImport(“user32.dll”)] public static extern int MessageBox(IntPtr hwnd,string t…...

编程日记 2023/9/25 7:45:05

用群晖做网站服务器/百度首页优化排名

题目链接&#xff1a; POJ-3087 题目大意&#xff1a; 两个长度相同的字符串表示两副扑克牌&#xff0c;按s2-s1-s2-s1…s2-s1的顺序一次叠加&#xff0c;称为一次洗牌操作&#xff0c;洗牌后上半部分为new s2 下半部分为new s1 &#xff0c;现在要求洗牌多少次可以达到某个…...

编程日记 2025/2/8 5:08:52

centos7.2 wordpress/北京营销型网站

2022/2/18 今天看到了一个很好的博客&#xff1a;https://wudan.blog.csdn.net/article/details/121909047?spm1001.2014.3001.5502 有关于promise的&#xff0c;我自己去尝试写接口试试 就是说resolve(subList) 那么res就是subList啊。没有res.subList vue 每隔几秒刷新请求…...

编程日记 2025/2/8 2:56:55

长沙市芙蓉区关于疫情最新消息/搜索引擎推广seo

目录 一、前言 二、安装教程 1.打开下载链接 2.配置插件 三、使用教程 1.页面介绍 2.功能布局 四、脚本功能兼容油猴脚本安装使用 1.安装油猴脚本 2.油猴脚本使用教程 五、超神的脚本推荐 1.Github 增强 - 高速下载 2.右键在新标签中打开图片时显示最优化图像质量…...

编程日记 2025/2/8 2:36:40

领动营销网站建设/手机网站排名优化

记得看过一个数据&#xff0c;中国软件企业 50人以下的公司数量达到 70% 以上&#xff0c;规模普遍偏小。我想这 70% 中至少有 80% 还是小作坊的研发模式&#xff0c;"三五个人&#xff0c;十来条枪"&#xff0c;有一部分企业偏居一隅&#xff0c;远离信息技术发达城…...

编程日记 2025/2/8 0:48:29

个人电脑做服务器网站/广告推销

点击上方“服务端思维”&#xff0c;选择“设为星标”回复”669“获取独家整理的精选资料集回复”加群“加入全国服务端高端社群「后端圈作者&#xff1a;终端研发部NO.1 Java.alng.NullPointerException这个异常大家肯定都经常遇到&#xff0c;异常的解释是 “程序遇上了空指…...

编程日记 2025/2/7 22:08:02

优度公司做的网站/广州十大营销策划公司

线程同步与异步套接字编程1.事件对象上一次介绍了利用互斥对象实现线程同步 http://blog.csdn.net/walkerkalr/article/details/19510909。这次将继续介绍另两种线程同步的方法&#xff1a;事件对象和关键字代码段。1.1事件对象事件对象也属于内核对象&#xff0c;包括三个成员…...

编程日记 2025/2/7 21:33:50