利用原生js实现vue的双向绑定思想

2017-07-18

vue的核心思想

1,数据驱动

2，组件化

利用原生js实现vue的双向绑定思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data bidirectional binding</title>
</head>
<body>
<input type="text" id="userName">
<span id="uName"></span>
</body>
<script>
    var obj = {};
    Object.defineProperty(obj, 'userName', {
        set: function (val) {
            console.log('set init');
            document.querySelector('#uName').innerText = val;
            document.querySelector('#userName').value = val;
        },
        get: function () {

        }
    });
    document.querySelector('#userName').addEventListener('keyup',function () {
        obj.userName = document.querySelector('#userName').value;
    });
</script>
</html>

Object.defineProperty()