使用原生实现v-model双向数据绑定

最新推荐文章于 2022-07-27 10:27:22 发布

Youyzq

最新推荐文章于 2022-07-27 10:27:22 发布

阅读量475

点赞数 2

分类专栏： vue js js原生文章标签： vue js

不许偷代码哦，一键三连以后我的代码就是你的代码！！！

本文链接：https://blog.csdn.net/Youyzq/article/details/119492746

版权

js 同时被 3 个专栏收录

59 篇文章 2 订阅

订阅专栏

js原生

24 篇文章 0 订阅

订阅专栏

vue

19 篇文章 2 订阅

订阅专栏

本文深入解析了Vue中v-model的特性，它允许开发者在不操作DOM的情况下实现数据与视图的双向绑定。接着通过实例展示了如何使用Object.defineProperty()在原生JavaScript中实现这一功能。当输入框值改变时，数据同步更新，反之亦然，为前端开发带来便利。

摘要由CSDN通过智能技术生成

什么是双向数据绑定？

一、v-model的特性

二、原生实现双向数据绑定

1.Object.defineProperty()

html结构

2.实现代码

什么是双向数据绑定？

即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。（vue）提供了v-model指令，主要来辅助开发这在(不操作DOM)的前提下，快速获取表单的数据。

一、v-model的特性

可以给变量赋值
会自主创建一个input事件动态的获取变量
默认会给元素创建一个value属性赋值

二、原生实现双向数据绑定

1.Object.defineProperty()

Object.defineProperty() : 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法:

Object.defineProperty( obj , prop , descriptor )

参数:

obj

要定义属性的对象。

prop

要定义或修改的属性的名称。

descriptor

要定义或修改的属性描述符。

html结构

<body>

  要修改的值<input type="text" name="" id="myp" >

</body>

2.实现代码

<script>
  // 定义变量
  let data= {
    msg:'双向数据绑定'
  }
  let vm = {}
  // 2.当vm的值发生改变 会调用
    Object.defineProperty(vm,'msg',{
  set(val){ // val是刚才给msg更改的值
    // 当vm里的msg更改的时候就触发set事件
    data.msg=val // 把数据回传给data   不是回传给msg  否则会出现递归
    document.getElementById('myp').value = val
    console.log(vm.msg);
  },
  get(){
    // 当要调用  msg的值的时候，获取到的值就是，从data里面拿到的值
    return data.msg
    // vm.msg=data.msg'里的值'
  }
})
document.getElementById('myp'),addEventListener('input',function (e) {
  // 把input标签里的值赋值给vm.msg 让他调用Objet.defineProperty方法
vm.msg =e.target.value // 把试图赋值给vue的变量
}) 
vm.msg = data.msg // 1.先默认执行一次事件，让他给input标签赋值
</script>