es6雙向數據綁定

代碼如下
<div id="test">

    <input type="text" v-model="name">
    name:{{name}}
    age:{{age}}
</div>
<script>
    let el = document.getElementById('test');
    let datainner = {
        name:"Jack",
        age:"18"
    }
    let template = el.innerHTML;
    let data = new Proxy(datainner,{
        set(obj,name,value){
            console.log(name+"的值被操縱成了"+value)
            obj[name]=value;
            console.log("數據改變了");
            render();
        }
    })
    render();
  
    function render(){
        //數據渲染
       el.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
           str=str.substring(2,str.length-2);
           console.log(datainner[str]);
           return datainner[str]
       })
       //找所有的v-model
       //Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例。
       Array.from(document.getElementsByTagName("input"))
       .filter(ele=>ele.getAttribute("v-model"))
       .forEach(input=>{
            console.log(input);
            let name = input.getAttribute('v-model');
            input.value = data.name;
            input.oninput = function(){
                data[name] = this.value;
            }
       })
    }
</script>