VUE双向绑定原理_vue的数据绑定怎么实现

VUE双向绑定原理_vue的数据绑定怎么实现烂大街原理:数据劫持+发布订阅者模式(obect.defineProperty())……..(此处省略8888个字节)。话不多说上代码HTML:<divid=”app”> <div> <divv-text=”myText”></div> <divv-text=”myBox”></d…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

烂大街原理:数据劫持+发布订阅者模式 (obect.defineProperty())……..(此处省略8888个字节)。

话不多说上代码

HTML:

<div id="app">
	<div>
	    <div v-text="myText"></div>
	    <div v-text="myBox"></div>
		<input type="text" v-model="myText">
	</div>
</div>

JS:仿vue数据初始化

const app = new Vue({
	el:'#app',
	data:{
		myText:'数据响应式',
		myBox:'我是一个盒子'
	}
})

核心:发布订阅者模式

//		发布订阅者设计模式
//		发布者化整为零,
		class Vue{
			constructor(options){
				this.options = options;
				this.$data = options.data;
				this.$el = document.querySelector(options.el);
				this._directive = {}; 
				
				this.Observer(this.$data);
				this.Complie(this.$el);
			}
			//劫持数据
			Observer(data){
				for( let key in data ){
					this._directive[key] = [];
					console.log(this._directive)
					let Val = data[key];
					let watch = this._directive[key];
					Object.defineProperty(this.$data, key, {
						get : function(){
							return Val;
						},
						set : function(newVal){
							if( newVal !== Val ){//新值不等于老值
								Val = newVal;
								//更新视图
								console.log(watch,'watch')
								watch.forEach(element => {
									element.update();
								})
							}
						}
					})
				}
			}
			//解析指令
			Complie(el){
				let nodes = el.children;
				for(let i = 0;i < nodes.length; i++){
					let node = nodes[i];
					if( nodes[i].children){
						this.Complie(nodes[i]);
					}
					if(node.hasAttribute("v-text")){
//						console.log(1)
						let attrVal = node.getAttribute('v-text');
						this._directive[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'));
//						console.log(this._directive);
					}
					if(node.hasAttribute("v-model")){
						let attrVal = node.getAttribute('v-model');
						this._directive[attrVal].push(new Watcher(node,this,attrVal,'value'));
//						console.log(this._directive);
						node.addEventListener('input',(function(){
							return function(){
								console.log(1);
								this.$data[attrVal] = node.value;
							}
						})().bind(this));
						
					}
				}
			}
		}
//		订阅者
		class Watcher{
//			div.innerHTML = vue对象.$data['myText'];
			constructor(el, vm, exp, attr){
				this.el = el;
				this.vm = vm;
				this.exp = exp;
				this.attr = attr;
				this.update();
			}
			update(){
				this.el[this.attr] = this.vm.$data[this.exp];
			}
		}

浏览器展示效果:

VUE双向绑定原理_vue的数据绑定怎么实现

VUE双向绑定原理_vue的数据绑定怎么实现

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194001.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • EJB学习

    EJB学习EJB:企业级JavaBean(EnterpriseJavaBean, EJB)是一个用来构筑企业级应用的服务器端可被管理组件。EJB主要有三种Bean:SessionBeans:&

  • linux文件共享 samba_文件共享服务

    linux文件共享 samba_文件共享服务Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成;SMB(ServerMessagesBlock,信息服务块)是一种在局域网上共享文件和打印机的一种通信协议,它为局域网内的不同计算机之间提供文件及打印机等资源的共享服务;SMB协议是客户机/服务器型协议,客户机通过该协议可以访问服务器上的共享文件系统,

  • Platform device and platform driver

    Platform device and platform driverPlatformdevice是专门给嵌入式系统设计的设备类型,一般在移植内核到自己的开发板时,基本上注册的所有的设备的类型全是platformdevice。实际上,platform在Linux内核中是以一条总线的身份登场的,要想让这样的总线和设备一起完美的工作,必须首先在系统

  • elk面试题_百家公司运维面试题汇总

    elk面试题_百家公司运维面试题汇总备注:这一我在去年国庆节期间,整理的整个19年,学员的面试遇到的问题,整理出来之后发给后期的学员,让他们做参考和学习,看看公司会面试哪些问题。前言小的时候,哭着哭着就笑了;长大后笑着笑着就哭了,这是一种人生经历,当你经历的越多,你越发现世界不像童话里那么美好。真正值得在乎的东西,不会越来越多,只会越来越少,所以珍惜你当下的每一寸时光。现在的每一份努力,都会变成倍增的回收,在公众面前表现出来。距…

  • intellij idea上传项目到码云

    intellij idea上传项目到码云

  • 多种方法彻底解决pycharm中: OSError: [WinError 1455] 页面文件太小,无法完成操作 的问题

    多种方法彻底解决pycharm中: OSError: [WinError 1455] 页面文件太小,无法完成操作 的问题目录1.重启pycharm(基本没啥用)2.把num_works设置为0(可能也没啥用)3.调大页面文件的大小(彻底解决问题)相信很多小伙伴在使用pycharm的时候都遇到这个问个报错问题吧,我是在跑PyTorch相关代码遇到的这个问题,也搜索了很多解决办法,这里介绍下我总结的经验.这是我搜索到的三种解决方法,依次来介绍下:1.重启pycharm(基本没啥用)这是最简单的方法了,可以先尝试一下,反正也很简单,不过如果你是第一次遇到这个问题,基本是解…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号