vue v-model双向绑定 原理（简陋版）

最新推荐文章于 2024-05-25 23:43:49 发布
最新推荐文章于 2024-05-25 23:43:49 发布
阅读量409 收藏
点赞数
文章标签： vue 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿照vue单向绑定</title>
</head>
<body>
	<div id="div1">
		姓名：<input type="text" v-model="name" id="ipt1"><br>
		年龄：<input type="text" v-model="age" id="ipt2"><br>
	    {{name}}{{age}}   
	</div>
</body>
<script>
//事实上vue就是一个Proxy
//Proxy就像是个保安，如果有人要找_data 必须先通过set()得到想要set的数据，在反馈给_data 
//let Str = str.replace(reg,function(index){
//       return index;
//}) reg有gStr的返回值就返回每个index字符串拼接
let flag = 0;
let _data = {
	name:'小王',
	age:13
} 
let template = document.getElementById('div1').innerHTML; 
let ipts = document.getElementById('div1').getElementsByTagName('input');
//console.log(ipts.length)
let data = new Proxy(_data,{
 	  set(obj,key,value){
 	  	 flag++;
 	  	 console.log(flag)
          obj[key] = value;
       
 	  }
 })

 render();
 function render(){
    div1.innerHTML = template.replace(/\{\{\w+\}\}/g,function(index){
    	  let name = index.substring(2,index.length-2);
    	  return data[name]
    })
       let arr = Array.from(ipts).filter(index=> index.getAttribute('v-model'));
       arr.forEach(item=>{
       	let name = item.getAttribute('v-model');
       	   item.value =  data[name];
	       	   item.oninput = function(){ 
	       	   data[name] = this.value
	       }
       })

 }

</script>
</html>
carryka
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2——v-model 双向绑定的原理
2201_75342929的博客
05-28 2685
vue 的双向绑定的底层实现，其实就是通过 Object.defineProperty 和 Object.defineProperties 方法实现的。
Vue学习——指令
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
03-23 332
Vue学习-指令 1.v-if v-if可以完全根据表达式的值在DOM中生成或移除一个元素。true->生成元素；false->移除元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> &lt
Vue之v-model双向绑定原理---kalrry
热门推荐
kalrry
04-26 2万+
Vue之v-model双向绑定原理---kalrry一、简介二级目录三级目录 一、简介 v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定 ps：不懂语法糖是什么意思的请点击 二级目录 三级目录 ...
简述 v-model 双向绑定的原理是什么？
最新发布
youhebuke225的博客
05-25 659
是 Vue.js 中用于实现表单输入和应用状态（即数据）之间双向绑定的指令。
v-model和双向绑定 原理
weixin_44680639的博客
02-09 6240
1. v-model原理 ：是基于@input/change和v-bind:value封装的语法糖 @input/change底层是 JS事件监控 V同步M v-bind:value底层是 JS的Object.defineProperty监控 M同步V 2.VUE双向绑定/响应式原理 通过触发事件打印vue模型数据，发现每个模型数据都有getter、setter方法，代表使用了 Object.defineProperty进行...
v-model的双向数据绑定实现原理（附：案例和项目实例）
您的博客
03-11 1万+
一. 前言。 相信对使用vue框架的童靴来说，v-model的使用都能信手沾来，熟悉的不能再熟悉，也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定，很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。 二. v-model的前世今生。 目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(in
vue自定v-model实现表单数据双向绑定问题
10-18
总的来说，Vue的`v-model`是实现数据双向绑定的关键，它简化了开发流程，提高了代码的可读性和可维护性。无论是基本的表单元素还是自定义组件，`v-model`都能帮助我们轻松地管理数据流。理解其工作原理对于深入学习...
Vue表单demo v-model双向绑定问题
08-27
`v-model`双向绑定的原理在于，Vue监听了这些表单元素的`input`事件，并在事件触发时更新相应的数据。同时，Vue也监听了数据的变化，当`data`中的属性值变化时，会同步到相应的表单元素上。这种机制大大简化了数据...
vue 入门，v-model数据绑定
05-03
这种双向绑定使得数据的管理变得非常直观。 接下来，我们通过一个简单的示例来进一步理解`v-model`。创建一个名为`helloWorld.html`的文件，内容如下： ```html <!DOCTYPE html> <meta charset="UTF-8"> ...
vue v-model动态生成详解
08-27
Vue V-Model 是一种双向数据绑定的方法，它可以将视图层的数据绑定到业务逻辑层的数据模型中，使得数据的变化可以实时地反映到视图层中。例如，在一个输入框中，我们可以使用 V-Model 将输入框的值绑定到一个变量中...
VUE v-model表单数据双向绑定完整示例
10-17
主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
v-model 双向绑定原理
m0_62782752的博客
03-15 2203
其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
V-model的双向绑定原理
weixin_45613948的博客
09-17 9101
V-model的原理 在学习v-model的过程中手贱自己用原生JS实现了一遍v-model的双向绑定。。。 首先，v-model只是个语法糖，实际上原理给表单元素用绑定值和input或change事件，举个例子： <input v-model="value" /> //实际上等于 <input v-bind:value="value" @input="value = $event.target.value" /> 至于表单元素的用法可以自行查看Vue官网文档。 简单阐述一下， i
（十二）v-model双向绑定原理、vue 的数据双向绑定原理
qq_43498878的博客
04-03 2847
vue接收一个模板和data参数。vue解析模版的时候渲染视图，初始化对行的订阅者。遍历data数据的时候初始化发布者,利用Object.defineProperty函数在get 中触发订阅器中的添加订阅者方法。当数据更新的时候再set 函数中触发订阅器中的通知函数，通过订阅器的update 方法更新视图。
Vue双向绑定原理（v-model）
wuxian_wj的博客
01-06 3542
之前有整理过Vue响应式原理，响应式主要的效果是数据改变了就会引起页面修改。关于v-model我们也不陌生，vue的双向绑定指令，页面修改会引起数据修改，数据修改页面也会跟着改变。我们直到数据->页面是由vue的响应式原理实现的，那么该怎么做到页面->数据的修改呢？ 表单绑定 v-model一般我们是在表单元素上进行使用，因为视图能影响数据，本质上是这个视图需要可交互，因此表单是实现这一交互的前提。表单的使用是以<input>、<textarea>、<select&
剖析Vue原理&实现双向绑定MVVM
前端小贤
03-05 259
相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法&lt;div id="mvvm-app"&gt; &lt;input type="text" v-model="word"&gt; &lt;p&gt;{{word}}&lt;/p&gt; &lt;button v-on:click="
v-model 双向绑定实现原理
weixin_49731402的博客
08-31 795
v-model本质上是 :value和v-on的结合体，就是绑定他的value,通过v-on触发，从而更新数据 双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件 其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图 订阅者模式：每一个{{name}} v-model=‘name’都会添加一个订阅者，从..
vue中v-model双向绑定原理
weixin_57322537的博客
09-23 3163
v-model绑定在表单上 v-model绑定在表单上时，v-model就是v-bind绑定value和v-on监听input事件的结合 v-model = :value + @input 用v-bind和input事件模拟v-model <input type="text" :value="username" @input="username = $event.target.value" /> 原理：通过 :value 绑定 username变量，每次输...
FE_Vue核心知识的学习 v-model 双向绑定原理
一个搬砖工人
03-12 400
接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。而Vue中的push却不等于 Array.prototype.push ，因为Vue中的push是经过包装的。中的属性做了一个数据劫持，把data里面的属性做了修改/升级，以便更好地完成响应式操作。以上代码是起作用的，这是为什么呢？
vue v-model双向绑定原理
04-11
Vue的v-model双向绑定原理是通过使用Object.defineProperty()方法监听数据变化，同时使用观察者模式更新视图。当数据发生变化时，触发setter方法更新数据，并立即更新依赖该数据的视图。当用户通过输入框等表单元素修改数据时，也会触发setter方法更新数据，并更新视图，实现双向绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值