console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div id="app">
		<input type="text" v-model="name">
    <br> 姓名：{{name}}
    性别：{{sex}}
  </div>
</body>
<script>
  let el = document.getElementById('app');
  let template = el.innerHTML;
  let _data = {
    name: 'HearLing',
    sex:"女"
  };
  defineReactive(_data,'name',_data['name'])
  render();

  function render() {
    //   替换{{}}里的值的，这个暂时不用改
    el.innerHTML = template.replace(/\{\{\w+\}\}/g, str => {
      str = str.substring(2, str.length - 2);
      console.log('str',str)
      return _data[str];
    });
    // watcher
    Array.from(el.getElementsByTagName('input'))
     .filter(ele => ele.getAttribute('v-model'))
     .forEach(input => {
       let name = input.getAttribute('v-model');
       input.value = _data[name];

       input.onblur = function () {
         _data[name] = this.value;
       };
    });
  }
  function defineReactive (data, key, val) {
        Object.defineProperty(data, key, {
            enumerable: true,
            configurable: true,
            get: function () {
                return val
            },
            set: function (newVal) {
                if(val === newVal){
                    return
                }
                val = newVal
                render();
            }
        })
    }
</script>

</html>