利用 proxy 实现简易的vue的双向数据绑定

最新推荐文章于 2022-12-09 16:49:12 发布

weixin_30878361

最新推荐文章于 2022-12-09 16:49:12 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/x-yy/p/11061835.html

版权

//  let p = new Proxy(target, handler);
//  参数target
//   用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
//  参数handler
//      一个对象，其属性是当执行一个操作时定义代理的行为的函数。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
      <input type="text" v-model="name"><br>
       姓名：{{name}}<br>
       年龄：{{age}}
    </div>
</body>
<script>
let el=document.getElementById('div1');

let template=el.innerHTML;

let _data={
name: 'blue',
age: 18
};

let data=new Proxy(_data, {
    set(obj, name, value){
      //alert(`有人视图设置 ${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);

return _data[str];
});

    //找所有的v-model
    Array.from(el.getElementsByTagName('input'))
      .filter(ele=>ele.getAttribute('v-model'))
      .forEach(input=>{

        let name=input.getAttribute('v-model');
        input.value=_data[name];

        input.οninput=function (){
          data[name]=this.value;
        };
      });
}
</script>
</html>

转载于:https://www.cnblogs.com/x-yy/p/11061835.html