双向数据绑定的原理

在学习Vue和Angular过程中都有一个双向数据绑定的一个东西，Vue中是v-model ,Angular中是ng-model,那他们是怎么实现的，
先说是怎么实现的吧，自己也网上找了一下实现的方法，找到了一个比较简洁的实现方法(可能不是vue或者angular源码的实现方法)，仅自己理解的实现方法。

1
2
3
4
<div class="box">
     <input type="text" id="model">
     <span id="bind"></span>
</div>

js代码：

1
2
3
4
5
6
7
8
9
10
<script>
        model=document.getElementById("model");
        bind=document.getElementById("bind");
        
        window.onload=function(){
            model.oninput=function(){
                bind.innerHTML=model.value;
            }
        }
</script>

定义和用法
oninput 事件在用户输入时触发。
该事件在 <input>或 <textarea>元素的值发生改变时触发。
提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

逻辑就是使用oninput事件获取每次输入input的value的值，然后使用innerHTML赋给span