阶段四/数据绑定的容器更新.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
</head>

<body>
 <input type="text" v-model="content" />
 <input type="text" v-model="title" />
 <input type="text" v-model="title" />
 <h4 v-bind="content"></h4>
</body>

<script>
  function View() {
    let proxy = new Proxy({}, {
      set(obj, property, value) {
        console.log(obj, property, value);
        document.querySelectorAll(`[v-model="${property}"]`)
                .forEach((item) => {
                  item.value = value;
                });
        document
          .querySelectorAll(`[v-bind="${property}"]`)
          .forEach((item) => {
            item.innerHTML = value;
          });
      },
      get(obj, property) { },
    });
    this.init = function () {
      const els = document.querySelectorAll(`[v-model]`);

      els.forEach((item) => {
        item.addEventListener('keyup', function () {
          //触发proxy的set
          proxy[this.getAttribute('v-model')] = this.value;
        });
      });
    };
  }
  new View().init();
</script>

</html>