尚硅谷vue课程之vue中的数据代理 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
                1.Vue中的数据代理：
                            通过vm对象来代理data对象中属性的操作（读/写）
                2.Vue中数据代理的好处：
                            更加方便的操作data中的数据
                3.基本原理：
                            通过Object.defineProperty()把data对象中所有属性添加到vm上。
                            为每一个添加到vm上的属性，都指定一个getter/setter。
                            在getter/setter内部去操作（读/写）data中对应的属性。
         -->
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>无论我们遇到什么{{difficulty}}</h2>
            <h2>{{brave}}</h2>
            <h2>面对{{fear}}，才能够战胜{{fear}}</h2>
            <h2>{{struggle}}</h2>
        </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                difficulty: '都不要怕',
                brave: '勇敢的面对它',
                fear: '恐惧',
                struggle: '加油！奥利给！'
            }
        })
    </script>
</body>
</html>

代码中定义的data便是vm中的_data

posted @ 2022-11-17 17:12  每日一小步  阅读(19)  评论(0)  编辑  收藏  举报