随笔- 77 文章- 0 评论- 1 阅读- 73128

VUE的核心原理

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="span"></div>
<input type="text" id="input">
<input type="text" id="input2">
</body>
<script>
    ///JS的defineProperty属性的作用是   改变对象属性
    // defineProperty('obj','text2','{    }');
    // 第一个  obj  传入的对象
    //第二个   text2 对象的属性   obj 对象拥有的text2属性
    //第三个  数据描述符和存取描述符   enumerable: false,    configurable: false,

    //writable: false,  value: "static"   和set()   get() 两者只能存在其1   get 一定要return 出结果

    var obj = {};
    Object.defineProperty(obj, 'text2', {
        get: function () {
            return value;
        },
        set: function (newvalue) {
            //接收input 里传来的值 给value
            value = newvalue
            document.getElementById('span').textContent = newvalue;
            document.getElementById('input').value = newvalue;
        }
    });
    //监听键盘的弹起事件
    document.getElementById('input').addEventListener('keyup', function (e) {
        console.log(e);
        console.log(e.target);
        console.log(e.target.value);
        //赋值给   obj对象属性
        obj.text2 = e.target.value;
    });

</script>
</html>