如何用js实现Vue2.0中数据的双向绑定功能

这篇文章主要介绍了如何用js实现Vue2.0中数据的双向绑定功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何用js实现Vue2.0中数据的双向绑定功能文章都会有所收获,下面我们一起来看看吧。

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为凌源企业提供专业的网站设计制作、做网站,凌源网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

Object.defineProperty了解

语法:

Object.defineProperty(obj, prop, descriptor)

  • obj  要定义属性的对象。

  • prop 要定义或修改的属性的名称

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

obj和prop很好理解 比如我们定义一个变量为

const o = {
    name:"xbhog"
}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor  目标对象属性的一些特征(是一个对象)
   descriptor  下有6个参数
 参数1:
     value:属性值
 参数2:
   writable:对象属性值是否可以被修改  true允许  false不允许
 参数3:
   configurable:对象属性是否可以被删除 true允许  false不允许
 参数4:
   enumerable:对象属性是否可被枚举
 参数5:
     get():是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
 参数6:
     set():是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值

注意:描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个

了解了前置知识,我们来实现Vue中的v-model的双向绑定

先看实现代码:




    
    通过js实现数据的双向绑定


    

你好:更新数据

首先我们通过document.querySelector获取input以及span标签的Html对象,在定义一个data对象,属性name先为空。

使用事件监听oninput来监听用户输入(该事件在