三、VUE数据代理

一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理

Object.defineProperty()

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性,或修改其现有属性,并返回此对象。

Object.defineProperty()
在这里插入图片描述

数据代理

通过一个对象代理另一个对象中属性的操作

    <!-- 数据代理,通过一个对象代理另一个对象中属性的操作  --><script type="text/javascript">let obj = { x:200 }let obj2 = { y:200 }//通过obj2代理obj,来操作obj的xObject.defineProperty(obj2, 'x',{get(){return obj.x},set(v){obj.x = v;}});</script>

Vue数据代理

  • Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
  • Vue中数据代理的好处:更加方便的操作data中的数据
  • 基本原理:
    通过Object.defineProperty()把data对象中所有属性添加到vm上。
    为每一个添加到vm上的属性,都指定一个getter/setter。
    在getter/setter内部去操作(读/写)data中对应的属性。
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue中的数据代理</title><script src="./vue.js"></script>
</head>
<body><div id="root"><h2>学校名称:{{ name }}</h2><h2>学校地址: {{ address }}</h2>
</div>
<script type="text/javascript">Vue.config.productionTip = false;let data;//通过vm代理const vm = new Vue({el:'#root',data(){return data = {name:'panyue',address:'shanghai'}}});
</script>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【imazing骗局】imazing软件安全吗 需要越狱吗 为什么iPhone都会装iMazing来管理

鉴于苹果设备的封闭性与安全性&#xff0c;我们大部分情况下都需要搭配iTunes进行设备的管理。但作为一款全方位的iOS设备管理软件&#xff0c;iMazing竟然可以突破iTunes的限制&#xff0c;与设备直接连接&#xff0c;进行备份、管理等操作。 因此&#xff0c;很多人都会有疑…

1002. 【USACO题库】1.1.3 Friday the Thirteenth 黑色星期五

1002. 【USACO题库】1.1.3 Friday the Thirteenth 黑色星期五 (Input: friday.in, Output: friday.out) 时间限制: 1 s 空间限制: 256 MB 题目描述 每月 13 号刚好落在星期五的情况&#xff0c;是不是一定比落在其他星期一~星期四&#xff0c;还有落在周末的这些情况少呢&…

zynq基础知识学习(1)

Zynq和FPGA区别——快速认识Zynq开发-CSDN博客 zynq的结构 什么是ZYNQ?ZYNQ简介-CSDN博客 ZYNQ简介-CSDN博客 ZYNQ基础知识-CSDN博客 ZYNQ相关的常见概念-CSDN博客 zynq&#xff1a;组合了一个双核ARM Cortex-A9处理器和一个现场可编程门阵列(FPGA)逻辑部件。 PL和PS端通…

项目总结(一)docker总结

目录 一、引言 二、docker ------>2.1、docker介绍 ------>2.2、与虚拟机的区别 ------>2.3、Docke基本概念 ------>2.4、Docker内部结构 ------>2.5、Windows上使用docker ------>2.6、Linux上使用Docker ------>2.7、Docker常用命令 ------&g…

太速科技-基于6U CPCIe的TMS320C6678+KU060的信号处理板卡

基于6U CPCIe的TMS320C6678KU060的信号处理板卡 一、板卡概述 基于6U CPCIe的C6678KU060的信号处理板卡是新一代FPGA的高性能处理板卡。板卡采用一片TI DSP TMS320C6678和一片Xilinx公司 XCKU060-2FFVA1156I作为主处理器&#xff0c;Xilinx 的Aritex XC7A200T作为辅助处…

数据结构——栈的应用

数据结构——栈的应用 括号匹配中缀转后缀什么是中缀后缀中缀表达式 (Infix Notation)后缀表达式 (Postfix Notation, Reverse Polish Notation, RPN) 加减&#xff0c;乘除运算处理括号后缀转中缀 我们今天来看栈的应用&#xff1a; 括号匹配 栈一个经典的应用就是括号匹配&…

set_input_delay的理解

1&#xff0c;set_input_delay约束理解 input_delay是指输入的数据到达FPGA的pad引脚时相对于时钟边沿的延迟有多大&#xff0c;单位是ns&#xff0c;数值可以是正&#xff0c;也可以是负。通过set_input_delay约束告诉编译器输入时钟和输入数据的相位关系。如下图所示假设时钟…

数字IC后端先进工艺设计实现之TSMC 12nm 6Track工艺数字IC后端实现重点难点盘点

大家知道咱们社区近期TSMC 12nm ARM Cortexa-A72(1P9M 6Track Metal Stack)已经开班。这里小编要强调一点:不要认为跑了先进工艺的项目就会很有竞争力&#xff01;如果你仅仅是跑个先进工艺的flow&#xff0c;不懂先进工艺在数字IC后端实现上的不同点&#xff0c;为何有这样的不…

推荐一个wordpress免费模板下载

首页大背景图&#xff0c;首屏2张轮播图&#xff0c;轮换展示&#xff0c;效果非常的炫酷&#xff0c;非常的哇噻&#xff0c;使用这个主题搭建的wordpress网站&#xff0c;超过了200个&#xff0c;虽然是一个老主题了&#xff0c;不过是经得起时间考验的&#xff0c;现在用起来…

[iOS]使用CocoaPods发布公开库

1.检查库名是否已被占用 选择库名时&#xff0c;尽量选择具有描述性并且独特的名字&#xff0c;这不仅可以避免命名冲突&#xff0c;还可以帮助用户更好地理解库的用途和功能。 在实际创建和发布 CocoaPods 库之前&#xff0c;确实应该检查库名是否已经被占用&#xff0c;以避…

clickhouse升级

参考链接&#xff1a; clickhouse 版本升级(rpm 安装包)_软件包 clickhouse-common-static-22.2.2.1-2.x86_64.rpm-CSDN博客

敏捷之Scrum开发

目录 一、什么是 Scrum 1.1 Scrum 的定义 二、Scrum 迭代开发过程 2.1 迭代开发过程说明 2.1.1 开发方法 2.1.1.1 增量模型 2.1.1.1.1 定义 2.1.1.1.2 模型方法说明 2.1.1.2 迭代模型 2.1.1.2.1 定义 2.1.1.2.2 模型方法说明 2.1.2 迭代过程 2.1.2.1 产品需求Produ…

万万没想到,原来这些维生素对帕金森有好处!

亲爱的读者朋友们&#xff0c;今天我们要聊一个特别的群体——帕金森病患者。在面对这一神经系统退行性疾病时&#xff0c;除了遵循医嘱进行药物治疗和康复锻炼&#xff0c;合理的饮食和营养补充也显得尤为重要。那么&#xff0c;究竟哪些维生素是他们不可或缺的呢&#xff1f;…

Maven 构建 Flink 应用程序的最佳实践(根除各种类冲突/类加载问题)

作为开发者,在构建 Flink 应用程序时的体验真是一言难尽,想必大家都曾遇到过各种 ClassNotFoundException、NoSuchMethodError 以及 Could not find any factory for identifier kafka/jdbc/hive/hudi that implements org.apache.flink.table.factories.DynamicTableFactory…

5-用户权限控制(前端)

1.登录成功后&#xff0c;调用状态管理中对应的设置菜单的方法 //调用store中的setMenu函数 this.$store.commit(setMenu,data.data.data)2.将后端返回的菜单数据存入Cookie中 //设置菜单的方法setMenu(state, val) {state.menu valCookie.set("menu", JSON.strin…

go语言实现简单登陆返回token样例

目录 1、代码实现样例&#xff1a; 2、postman调用&#xff0c;获取登陆后的token&#xff1a; 1、代码实现样例&#xff1a; package mainimport ("net/http""time""github.com/dgrijalva/jwt-go""github.com/gin-gonic/gin" )var …

【代码问题】【Pytorch】训练模型时Loss为NaN或INF

解决方法或者问题排查&#xff1a; 加归一化层&#xff1a; 我的问题是我新增的一个模块与原来的模块得到的张量相加&#xff0c;原张量是归一化后的&#xff0c;我的没有&#xff1a; class Module(nn.Module):def __init__(self,dim,):super().__init__()# 新增一个LayerNo…

python学习笔记B-13:序列结构之元组--元组的相关操作

元组的常用相关操作有&#xff1a;获取最大值、获取最小值、获取元组长度、查询是否包好某元素、获取元素索引值、获取元素数量 t (2,4,6,90,34,25,78) print("原元组&#xff1a;",t) print("最大值&#xff1a;",max(t)) print("最小值&#xff1…

matlab新手快速上手3(差分进化算法)

本文用经典差分进化框架模板&#xff0c;对matlab新手友好&#xff0c;快速上手看懂matlab代码&#xff0c;快速应用实践&#xff0c;源代码在文末给出。 差分进化算法定义&#xff1a; 差分进化算法&#xff08;Differential Evolution&#xff0c;简称DE算法&#xff09;是…

深入理解前端开发:从基础到实践

导语&#xff1a; 随着互联网技术的飞速发展&#xff0c;前端开发已经成为了Web开发中不可或缺的一部分。本文将带领大家深入了解前端开发的基础知识、技术栈和实践案例&#xff0c;帮助大家提升前端开发技能。 一、前端开发基础知识 1. HTML&#xff1a;网页的骨架 HTML&am…