vue项目——双向数据绑定原理/Object.defineProperty()函数

最新推荐文章于 2024-02-16 07:45:00 发布

置顶一只没有感情的小杀手

最新推荐文章于 2024-02-16 07:45:00 发布

阅读量119

点赞数 1

分类专栏： Vue基础知识及实战精华 Vue语音数据平台文章标签： vue 双向数据绑定

本文链接：https://blog.csdn.net/qq_40556950/article/details/103280983

版权

Vue基础知识及实战精华同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

Vue语音数据平台

17 篇文章 0 订阅

订阅专栏

1.Object.defineProperty()函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>

    <script>	

      var obj = {
        pwd:"123456"  // 2. 直接在这里给obj添加新属性
      };
      Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性 （Object.definePropert有拓展属性的能力）
        value:"Jack"
      });

		
    </script>

</body>
	
</html>

介绍一下Object.defineProperty()函数有拓展对象属性的能力。

在控制台中可看到两种方法都可以为 obj 对象添加属性

控制台打印obj

2.input监听数据变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>

      document.getElementById("userName").addEventListener("keyup",function(event){
         document.getElementById("uName").innerText = event.target.value;
	  })
		
    </script>
</body>
	
</html>

在input输入框中输入时可看到： input

这个可以通过input监听数据变化，但是需要添加keyup事件去监听，要不然就不知道用户发生了改变

3.vue双向数据绑定关键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>

      var obj = {
         pwd:"123456"   // 2. 直接在这里给obj添加新属性
	  };

	  Object.defineProperty(obj,"userName",{  // 1. 给obj拓展一个新的属性 
            get:function(){
              console.log("get init")
	        },
            set:function(){
              console.log("set init")
            }
	  });	

    </script>
</body>
</html>

可看到在下图中，为obj的userName属性重新赋值的时候，触发了set init；获取obj的userName属性的时候

触发了set init。

在代码中再更改一些：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
	<br>  
    <span id="uName"></span>
	<script>

        var obj = {
          pwd:"123456"  // 2. 直接在这里给obj添加新属性
        };
        Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性 
         get:function(){
           console.log("get init")
		 },
         set:function(val){
           console.log("set init")
           document.getElementById("uName").innerText = val;
           document.getElementById("userName").value = val;
		}
		});
	
        document.getElementById("userName").addEventListener("keyup",function(event){
		  obj.userName = event.target.value;
	    })
		
	</script>
</body>
</html>

在控制台中更改userName属性后，input上的值和span中的值同时出现了

这是vue中双向数据绑定的关键！

一只没有感情的小杀手

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue项目——双向数据绑定原理/Object.defineProperty()函数

1.Object.defineProperty()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue双向数据绑定原理</title></head><body> <i...
复制链接

扫一扫

专栏目录