先不说一大堆乱七八糟的话，直接上代码，然后再解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="username">
<input type="text" id="uname">
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj,"username",{
get:function(){
console.log("get init")
},
set:function(val){
console.log("set init")
document.getElementById(‘uname‘).value = val
}
})
Object.defineProperty(obj,"uname",{
set:function(val){
document.getElementById(‘username‘).value = val
}
})
document.getElementById(‘username‘).addEventListener("keyup",function(event){
obj.username = event.target.value
},false)
document.getElementById(‘uname‘).addEventListener("keyup",function(event){
obj.uname = event.target.value
},false)
</script>
</body>
</html>
实现效果
Object.defineProperty有两个底层的方法分别是set和get，双向绑定就主要用到了set。
如上面代码，我们用Object.defineProperty来定义obj的属性，分别定义了username，uname两个属性，只要给这两个属性赋值，set方法就会被隐秘的调用。
正好set方法里有个参数val，就是所赋的值。我们可以在set方法里，把这个val赋值给分别需要绑定的input的value值。
再通过绑定keyup事件，将输入的内容赋值给obj的两个属性，这样就实现了vue的双向绑定。
原文：https://www.cnblogs.com/gehaoyu/p/11967533.html