7. Vue学习笔记之数据代理

最新推荐文章于 2024-07-25 11:00:49 发布

二爷.

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量261

点赞数

分类专栏： vue 学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43773170/article/details/122337916

版权

vue 学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾Object.defineproerty方法</title>
</head>
<body>
    <script>
        let number = 18
        let person= {
            name:'男',
            sex:'男',
            // age:18,
        }
        Object.defineProperty(person,'age',{//这里的 age 不能被枚举
            // value:18,
            // enumerable:true,//可否遍历 开关
            // writable:true,// 控制属性是否可以被修改
            // configurable:ture,//控制属性是否可以被删除

            get:function(){ // 当有人读取 person 的 age 属性时，get 函数(getter)就会被调用，且返回值就是 age 的值
                return number //这个时候改了 number 的值有用，上面两处都不行。
            },
            set(value){// 当有人修改了 person 的 age 属性时，set 函数（setter）就会被调用，且会收到修改的值
                number = value
            }
        })
        console.log(Object.keys(person)) //遍历
        console.log(person)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>何为数据代理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） 类似 Java 中的 get set 方法-->
    <script>
        let obj = {x:100}
        let obj2 = {y:200}
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>
<script>
    Vue.config.productionTip = false
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的数据代理</title>
    <script 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>学校地址：{{name}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    let data = {
            name:'七里香',
            adderss:'我老家'
        }
    const vm = new Vue({
        el:'#root',
        data
    })
</script>
</html>

在这里插入图片描述

二爷.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7. Vue学习笔记之数据代理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回顾Object.defineproerty方法</title></head><body> <script> let number = 18 let person= { name:
复制链接

扫一扫