vue实现数据双向绑定原理剖析

最新推荐文章于 2022-12-02 15:20:14 发布

骑着毛驴的小猴子

最新推荐文章于 2022-12-02 15:20:14 发布

阅读量348

点赞数

分类专栏： Vue全家桶技术文章标签： vue数据双向绑定原理

本文链接：https://blog.csdn.net/weixin_31765427/article/details/77878809

版权

Vue全家桶技术专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、对象.define 属性（）

该Object.defineProperty()方法直接在对象上定义一个新属性，或修改对象上的现有属性，并返回该对象。
语法：Object.defineProperty(obj, prop, descriptor)
参数说明：
- obj 定义属性的对象。
- prop 要定义或修改的属性的名称。
- descriptor 定义或修改属性的描述符。
返回值传递给函数的对象。

二、vue实现数据绑定原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="userName" id="userName" value="" />
        <span id="uname"></span>
        <script type="text/javascript">
            var obj = {};
            Object.defineProperty(obj,"userName",{
                set:function(val){
                    console.log("set init ");
                    document.getElementById("userName").value = val;
                    document.getElementById("uname").innerHTML = val;
                },
                get:function(val){
                    console.log("get init");
                }
            });
            document.getElementById("userName").addEventListener("keyup",function(e){
                obj.userName = e.target.value;
            })
        </script>
    </body>
</html>

set和get是defineProperty方法里面的两个方法。会自动调用
这里写图片描述

骑着毛驴的小猴子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue实现数据双向绑定原理剖析

一、对象.define 属性（）该Object.defineProperty()方法直接在对象上定义一个新属性，或修改对象上的现有属性，并返回该对象。语法：Object.defineProperty(obj, prop, descriptor)参数说明： obj 定义属性的对象。prop 要定义或修改的属性的名称。descriptor 定义或修改属性的描述符。返回值传递给函数的
复制链接

扫一扫