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)
blank

相关推荐

  • pycharm实现基于mysql关键词检索问题

    pycharm实现基于mysql关键词检索问题       后端是使用pycharm写的       单个关键词的检索实现如下:defadProQuery(): content=request.form.get(‘ad_proSearch’)#需要查询的内容ifcontentisNone:content=””pros=Cy_regist.query.f

  • SMS之SMS主站点配置

    SMS之SMS主站点配置

  • 51单片机最小系统解读

    51单片机最小系统解读提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、51单片机最小系统模块构成二、电源电路1.电源引脚三、时钟电路1.外部晶振引脚2.晶振(时钟电路)3.时钟电路小tips四、复位电路1.按键复位2.上电复位总结前言在学习51单片机的时候我们最先接触到的就是单片机最小系统,单片机最小系统又叫最小应用系统,顾名思义就是能够使单片机实现简单运行的最少原件的组合。提示:以下将以51单片机最小系统为例进行介绍一、51单片机最小系统模块构成二、电源电路一个系统的

  • linux下重启oracle的方法

    linux下重启oracle的方法

  • jquery+正則表達式验证邮箱格式的样例「建议收藏」

    jquery+正則表達式验证邮箱格式的样例

  • app的测试点_测试皮肤的软件叫什么

    app的测试点_测试皮肤的软件叫什么APP测试有很多方面需要考虑到,我列几点有明显特征的:功能测试:手机软件的基本功能。倒不一定完全由测试人员来完全执行,但却是所有测试中最重要的,需要测试人员做很好的测试策略和职责划分。稳定性测试:大多数手机应用是需要保证能够稳定运行一定时间的(尤其是对于一些记事类应用),而且在应用的运行状态发生切换后需要继续保持当前的状态,不出现闪退。性能测试:这部分分为两个方面,一部分是后台服务的性

发表回复

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

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