vue雙向綁定的簡單實現（原創）

時間 2019-11-16

標籤 vue 雙向綁定簡單實現原創简体版

原文原文鏈接

簡單模擬一下vue的雙向綁定實現，代碼比較粗糙，菜鳥一枚，歡迎各位大佬斧正html

一、實驗環境：vue

利用a、b兩個input，a表明頁面中的數據，b表明data中的數據ui

二、原理：spa

利用Object.defineProperty()方法實現數據的更新；使用oninput（IE下的）和onporpertychange（非IE下的）方法對input框中值的改變進行監聽雙向綁定

三、代碼code

注：如下原生js實現htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。