Vue中的数据代理

最新推荐文章于 2024-04-03 16:40:58 发布

前端程序员路易

最新推荐文章于 2024-04-03 16:40:58 发布

阅读量278

点赞数

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

本文链接：https://blog.csdn.net/qq_46582421/article/details/121215841

版权

vue 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的数据代理</title>
</head>
<body>
    <div id="root">
        <h2>海南：{{hainan}}</h2>
        <h2>城市2：{{address}}</h2>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
    
        //创建Vue实例
        const vm = new Vue({
            el:'#root',//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{
                hainan:'海南',//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成-一个对象。
                address:'海口'
            }
        })
        </script>
</body>
</html>

前端程序员路易

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的数据代理

1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)2.Vue中数据代理的好处:更加方便的操作data中的数据3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每个添加到vm上的属性，都指定个getter/setter.在getter/setter内部去操作(读/写) data中对应的属性。代码：<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫