利用js实现Vue2.0中数据的双向绑定功能
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的双向绑定
先看实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过js实现数据的双向绑定</title>
</head>
<body>
<input type="text"/><br>
<h1>你好：<span>更新数据</span></h1>
<!-- 通过js实现数据的双向绑定 -->
<script>
// 方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象
var ipt =document.querySelector('input');
var p = document.querySelector('span');
var data = {name:""};
/*
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
*/
ipt.oninput = function(){
// 将ipt.value中的值传给data.name的value
data.name = ipt.value;
}
//劫持ipt.value
Object.defineProperty(data,"name",{
// 数据订阅
get(){
return ipt.value; //当访问的时候会调用get方法
},
// 数据劫持
//name:value
set(value) {
p.innerHTML = value;
ipt.value = value;
}
})
</script>
</body>
</html>
首先我们通过document.querySelector获取input以及span标签的Html对象，在定义一个data对象，属性name先为空。
使用事件监听oninput来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。
将ipt.value中的值传给data.name的value；
data.name = ipt.value;
利用Object.defineProperty劫持用户输入的数据。
- get 属性：是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值
- set 属性：是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值
Object.defineProperty(data,"name",{
// 数据订阅
get(){
return ipt.value; //当访问data.name时候会调用get方法，调用ipt.value获取当前value的值
},
// 数据劫持
set(value) { //设置数据的时候会自动调用set方法
p.innerHTML = value;
ipt.value = value;
}
看效果比较明显：
set方法：
get方法：
最后实现效果：
参考资料：
- https://blog.csdn.net/Doulvme/article/details/107978012
- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
- https://www.jianshu.com/p/6f589af16ad4
- //www.jb51.net/article/217657.htm (推荐)
总结
到此这篇关于利用js实现Vue2.0中数据双向绑定功能的文章就介绍到这了,更多相关js实现Vue2双向绑定内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要为大家详细介绍了C# TextBox数据绑定的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下...2015-12-17
- vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下...2021-07-19
- 这篇文章主要介绍了C#移除所有事件绑定的方法,实例分析了C#事件绑定的移除方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容...2021-09-27
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据，整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，感兴趣的朋友...2021-07-24
- 这篇文章主要为大家详细介绍了Unity3D仿写Button面板事件绑定功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C#实现绑定Combobox的方法,涉及Combobox参数设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-30- 这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下...2016-03-07
使用Object.defineProperty实现简单的js双向绑定
这篇文章主要介绍了使用Object.defineProperty实现简单的js双向绑定的相关资料,需要的朋友可以参考下...2016-04-18- 这篇文章主要为大家详细介绍了jquery事件绑定解绑机制源码，感兴趣的小伙伴们可以参考一下...2016-10-03
- 动态绑定是我们日常开发中经常遇到的一个需求，下面这篇文章主要给大家介绍了关于vue动态绑定图标的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下...2021-05-23
- 小编推荐的这篇文章介绍了VUE JS使用组件实现双向绑定的示例代码，有需要的同学快看看吧！ 1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架，他的性能超过ANG...2017-01-22
- 这篇文章主要介绍了C#数据绑定(DataBinding)简单实现方法,以简单实例形式简单分析了C#实现数据绑定与读取的方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了asp.net core系列之模型绑定和验证方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
asp.net中ListBox 绑定多个选项为选中及删除实现方法
文章介绍了关于在asp.net中的listbox的绑定多个选项和同时选中多个选项以及删除多个选项的方法...2021-09-22