vue双向绑定的简单实现（原创）

简单模拟一下vue的双向绑定实现，代码比较粗糙，菜鸟一枚，欢迎各位大佬斧正

1、实验环境：

利用a、b两个input，a代表页面中的数据，b代表data中的数据

2、原理：

利用Object.defineProperty()方法实现数据的更新；使用oninput（IE下的）和onporpertychange（非IE下的）方法对input框中值的改变进行监听

3、代码

注：以下原生js实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  a: <input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)">
     </br>
  b: <input type="text" id="b" oninput="bb(event)" onporpertychange="bb(event)">
</body>
</html>
<script>
  var a = document.getElementById('a')
  var b = document.getElementById('b')
  var data = {}
  Object.defineProperty(data, "cell", {
    set: function(newValue) {
      if (newValue) {
        a.value = newValue
        b.value = newValue
      }
    }
  })
</script>
<script>
  var ie = !!window.ActiveXObject;
  console.log('111')
  if("onporpertychange" in a){
    document.getElementById("a").attachEvent("onporpertychange",function(e){
      console.log("input");
    })
    document.getElementById("b").attachEvent("onporpertychange",function(e){
      console.log("input");
    })
  } else {
    document.getElementById("a").addEventListener("oninput",function(e){
      console.log("input");
    })
    document.getElementById("b").addEventListener("oninput",function(e){
      console.log("input");
    })
  }
  function aa(e){
    data.cell = a.value
  }
  function bb(e){
    data.cell = b.value
  }
</script>

posted on 2018-09-19 12:23 tt-wedos 阅读(200) 评论(0) 编辑收藏举报