vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
vue双向数据绑定js如何实现
纯JS如何实现vue.js下的双向绑定功能目录
- 首先说一下实现双向绑定的思路:
- 再说一下实现这些功能的js主要的方法有哪些:
- 最后需要创建哪些工具类?
- 实现vue双向绑定
看下面截图
这是一个普通的html文件,也并没有引入vue.js,是不是在代码中看到有些熟悉的地方?比如:"v-model","v-on:click",还有常用的“双花括号{{}}”赋值语句。
首先说一下实现双向绑定的思路:一、创建一个自定义vue js对象,例如上面的wslVue 对象,初始化方法里面需要的参数有:(1)需要挂载到的dom对象id、(2)自定义vue对象的data属性(json对象)、(3)后面添加了一个模拟挂载的方法。(这里有用的就是(1)、(2)参数,(3)参数可以当认为vue对象所有的初始化工作完成后可以进行渲染(挂载)了方法回调)。
二、重写vue属性data json对象的set、get方法,同时可以为vue对象添加data下的所有属性,重写vue生成属性的set、get方法,方法里直接执行data的set、get方法(目的是可以直接用vue对象属性的读写进行dom操作)。
三、解析html,将html里面的标签node、文本node进行特定重组(这里说的特定重组指的就是将vue指令,{{}} 赋值符号转换为正常的html文档进行输出),在解析过程中对每一个需要操作的node进行缓存、绑定逻辑、添加监听事件(比如:input标签输入)。
再说一下实现这些功能的js主要的方法有哪些:一、js对象属性的set、get方法。
二、document.createDocumentFragment html片段解析。
三、相关的正则判断进行html代码片段重组。
最后需要创建哪些工具类?一、vue对象。
二、观察者类Watcher,保存需要操作的node节点和属性变更需要做的回调方法。
三、管理所有观察者Watcher的管理类Dep,控制数据变更相关Watcher进行回调渲染。
实现vue双向绑定初始化vue对象方法
注释:
1:为vue对象添加data里全部的属性,并重写set、get方法。
2:为vue对象添加方法管理methods对象,当解析html获取到v-on:click方法的时候为标签添加click事件方法体。
3:这里进行解析html,解析时遇到需要处理的node时创建Watcher对象,将相关node及指令保存在Watcher对象里,并把Watcher对象添加到观察者管理类Dep集合里面。
4:初始化完成后进行挂载,渲染完整的html到指定的dom元素上。
Compile类解析需要挂载对应的dom
获取全部的node节点
解析特定指令
标签元素与文本内容判断
这里如果是标签node需要解析里面的v-on和v-model指令
v-model
v-on:click
红线处即为vue对象里methods匹配出来的方法,为当前的node添加点击事件。
这里如果是文本内容node需要解析里面的{{}}指令。
总结:这里会创建很多Watcher对象,对象保存了当前vue对象、node、数据变更回调,并保存在Dep管理类里,以待数据变更时直接执行方法回调进行渲染。
特定指令判断
Watcher及Dep对象
最后放一张思维导图
结尾:到这里基本的思路就讲完了,没有太复杂的逻辑,表达能力有限。希望对大家能有帮助,同时也接受大神们的批评指正,共同进步。
以上就是纯JS如何实现vue.js下的双向绑定功能的详细内容,更多关于JS实现vue的双向绑定的资料请关注开心学习网其它相关文章!
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- js中encodeURIComponent与C#中HttpUtility.UrlEncode
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- ExtJs中getCmp、getDom、Get的区别
- nodejsweb服务(Nodejs实现内网穿透服务)
- js操作iframe
- JS中instanceof与typeof的区别有哪些
- sqlserver如何生成xml文件(实现SQL Server 原生数据从XML生成JSON数据的实例代码)
- extjs accordion折叠布局
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- nginx安全配置提示(wdcp Linux面板nginx启用gzip后js未压缩解决方案)
- 火狐查看json数据
- js怎么转拼音(js实现中文转拼音的完整步骤记录)
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- 微信浏览器中JS实现返回操作
- 高马尾扎发(高马尾扎发教程视频)
- 这里输入关键词(请手动输入关键词)
- 小说 顾瑾岚拿出一套飞行棋,别说你连飞行棋都不会哦(顾瑾岚拿出一套飞行棋)
- 金品公司 界界乐中秋限定飞行棋礼盒 露营藤篮礼盒全新上市(界界乐中秋限定飞行棋礼盒)
- 必看 8月,相比七夕,更需要注意的是这些事(必看8月相比七夕)
- 8月23日11时16分将迎处暑,逐渐进入气象意义上的秋天(8月23日11时16分将迎处暑)
热门推荐
- python获取当前时间戳(Python基于datetime或time模块分别获取当前时间戳的方法实例)
- docker-compose查看服务状态(Docker+DockerCompose封装web应用的方法步骤)
- opencv 图像匹配python(OpenCV+Python识别车牌和字符分割的实现)
- VPS/云服务器使用3389端口远程连接管理图文教程(Windows)(VPS/云服务器使用3389端口远程连接管理图文教程Windows)
- mysql架构示意图(MySQL创建横向直方图的解决方案)
- 接到面试通知后必须做哪些准备
- laravel分页(laravel5.5添加echarts实现画图功能的方法)
- php用什么解压(php解压缩zip和rar压缩包文件的方法)
- phpstudy怎么升级mysql(phpStudy中升级MySQL版本到5.7.17的方法步骤)
- python怎么提取微信数据(使用Python+wxpy 找出微信里把你删除的好友实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9