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

2019-06-20 22:40:53 阅读：148 来源： 互联网

标签：vue name 绑定 value let proxy str input data

//  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.oninput=function (){
          data[name]=this.value;
        };
      });
}
</script>
</html>

标签：vue,name,绑定,value,let,proxy,str,input,data
来源： https://www.cnblogs.com/x-yy/p/11061835.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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