vue中的数据代理

最新推荐文章于 2024-01-10 20:23:08 发布

我的时区

最新推荐文章于 2024-01-10 20:23:08 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/The_Road_of_Java/article/details/122078435

版权

笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>名称:{{name}}</h2>
        <h2>地址:{{address}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        // 1.Vue中的数据代理
        //     通过vm对象代理对data对象中属性的操作
        // 2.Vue中数据代理的好处
        //     更加方便的操作data中的数据
        // 3.基本原理
        //     通过Object.defineproperty()把data对象中所有的属性添加在vm上。
        //     为每一个添加到vm上的属性都指定一个getter/setter
        //     在getter/setter内部去操作data中对应的属性
        const vm = new Vue({
            // el: '#root',
            data() {
                return {
                    name: 'vue',
                    address: '深圳'
                }
            }
        })
        vm.$mount('#root');//data中的数据挂载在root容器中
    </script>
</body>

</html>