vue用Object.defineProperty手写一个简单的双向绑定的示例

最新推荐文章于 2024-02-27 21:02:02 发布

愿不忘初心

最新推荐文章于 2024-02-27 21:02:02 发布

阅读量313

点赞数 1

分类专栏： JavaScript相关前端框架Vue

本文链接：https://blog.csdn.net/qq_36140085/article/details/105382337

版权

JavaScript相关同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

前端框架Vue

7 篇文章 0 订阅

订阅专栏

Object.defineProperty方法延伸了解

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双向绑定</title>
</head>
<body>
  手写一个简单双向绑定<br/>
  <input type="text" id="model"><br/>
  <div id="modelText"></div>
</body>
<script>
  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      console.log("你来拿值啦！");
      return defaultName;
    },
    set: function (value) {
      defaultName = value;
      model.value = value;
      console.log("你来修改值啦！");
      console.log(value);
      modelText.textContent = value;
    }
  })

  userInfo.name = "new value";
  var isEnd = true;

  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //加入监听中文输入事件
  model.addEventListener("compositionstart", function () {
    console.log("开始输入中文啦");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("结束输入中文啦");
  })
</script>
</html>

愿不忘初心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue用Object.defineProperty手写一个简单的双向绑定的示例

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>双向绑定</title></head><body> 手写一个简单双向绑定<br/> <input type="text" id="model"&...
复制链接

扫一扫

专栏目录