Vue底层之手写数据绑定

最新推荐文章于 2024-11-01 14:29:13 发布

飞鸿s

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量275

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59553217/article/details/127021964

版权

 <input type="text">
  <br />
  值:<div></div>

问题：我们如何将input的值绑定到div呢？

解决思路：

1.首先得获取input的值

2.将值赋值给div

   // 1.获取input中的值 
    document.querySelector('input').addEventListener('keyup', (e) => {
      // 4. 将e.target.value 设置为obj要绑定的对象
      obj.name = e.target.value
    })

    // 2.Object.defineProperty的get和set来进行数据劫持和绑定
    let obj = {}
    Object.defineProperty(obj, "name", {  // name 绑定的对象
      get: function () {
        console.log("取值")
      },
      set: function (value) {
        // 3.获取div的值 将获取到的值赋值给div
        document.querySelector("div").innerHTML = value
      }
    })