原生js开发vue的双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app'>
<input style="width: 200px;height: 38px;outline: none;display: inline-block;" type='text' v-model='text' />{{text}}
<input style="width: 200px;height: 38px;outline: none;display: inline-block;" type='text' v-model='name' />{{name}}
<div style="width: 200px;height: 40px;background: red;" v-if='show'></div>
</div>
<script>
function Vue(options){
this.data=options.data;
var id=options.el;
var data=this.data;
this.observe(data,this)
var dom=this.tofagerment(document.getElementById(id),this);
var pardom=document.getElementById(id).appendChild(dom)
}
Vue.prototype.tofagerment=function(node,vm){
var flag=document.createDocumentFragment();
var child="";
while(child = node.firstChild){
this.compile(child,vm)
flag.append(child);
}
return flag
}
Vue.prototype.compile=function(child,vm){
var name=""
if(child.nodeType==1){
if(child.hasAttribute('v-model')){
name=child.getAttribute('v-model');
child.addEventListener('input',function(e){
var e=e||window.event;
var target=e.target||e.srcElement;
vm[name]=target.value;
})
child.value=vm[name];
child.removeAttribute('v-model')
}
}else if(child.nodeType==3){
var reg=/\{\{(.*)\}\}/;
if(reg.test(child.nodeValue)){
var regname=reg.exec(child.nodeValue)[1];
regname=regname.trim();
child.nodeValue=vm[regname]
}
new Watcher(vm,child,regname)
};
}
//订阅
Vue.prototype.observe=function(obj,vm){
Object.keys(obj).forEach(function(key){
console.log(obj[key])
vm.defineReactive(vm,key,obj[key])
})
}
// 消费
Vue.prototype.defineReactive=function(obj, key , value){
var dep=new Dep()
Object.defineProperty(obj,key,{
get:function(){
console.log('获取值');
if(Dep.target){
console.log(32423423)
dep.addSub(Dep.target)
}
return value
},
set:function(newValue){
console.log('设置值'+newValue);
if(newValue==value)return ;
value=newValue;
dep.notify()
}
})
}
//观察者模式
function Watcher(vm,node,name){
Dep.target=this
this.vm=vm;
this.node=node;
this.name=name;
this.update();
Dep.target=null
}
Watcher.prototype.get=function(){
this.value=this.vm[this.name]
}
Watcher.prototype.update=function(){
this.get()
this.node.nodeValue=this.value
}
//发布者
function Dep(){
this.subs=[];//订阅客户
}
Dep.prototype.addSub=function(sub){
this.subs.push(sub)
}
Dep.prototype.notify=function(sub){
this.subs.forEach(function(item){
item.update()
})
}
var myvue=new Vue({
el:"app",
data:{
text:'1312323123',
name:"eqwewqeqeq",
show:false,
}
})
</script>
</body>
</html>
原生js开发vue的双向数据绑定的更多相关文章
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- 面试题：你能写一个Vue的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- 浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- 一个关于原生 js 开发一款插件的前端教程
教程链接: http://www.codeasily.net/course/plugin_course/ 写的不是很好,前面比较松后面比较急,请大家见谅,本人也没多少年前端经验,拿以前写过的教程网站, ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
随机推荐
- 前端的UI框架
iView 框架 使用场景 iView 主要适合大中型中后台产品,比如某产品的运营平台.数据监控平台.管理平台等,从工程配置.到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合 ...
- 图片懒加载 echo.js
(function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...
- TCP建立与断开连接、socket通讯模板
在传输层,有一个重点是TCP传输时建立连接的三次"握手"和四次"挥手",因为socket工作于应用层和传输层之间,故而涉及到建立连接和关闭连接的过程,以下笔记可 ...
- 《大型网站系统与Java中间件实现》有感
头一次只用了一周的时间就看完一本书<大型网站系统与Java中间件实现>,这本书是关于设计方面的,提到了服务框架,消息中间件,数据访问层,以及如何解决应用之间的调用,解耦,以及应用和存储之间 ...
- 常用的几个CSS前端效果
做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...
- SQL Server初探
SQL Server的结构与Oracle不同,SQL Server里边可以包括很多的database,每个database有自己的表,用户等信息.比如目前有一个应用,应用的每个数据集都是一个datab ...
- 迁移32位下的旧代码到64位sever遇到过的两个很诡异的问题
一个是GetHashCode,这个方法是返回一个int值,在32位系统里,都是正值,但在64位系统里会返回负值. 另一个问题是DataTable的Sort属性,在没有显示写明升序或降序的情况下,在32 ...
- zabbix批量添加被监控windows客户端
由于公司大部分用的是windows服务器,大概有50多台.如果是一台一台添加的话很是麻烦,如果数量更多的话那工作量可想而知.所以网络管理员通常都是非常懒的. 环境:公司虽是域环境,但是除了几台域服务器 ...
- Schema、API Schema与MFn
大部分知识都是相通的,Maya和USD在设计上有很多相似之处,USD的Schema粗看很难理解,但实际上与Maya的MFn有着异曲同工之处.这篇文章会简单介绍一下这两个知识点,做个对比,了解下它们在各 ...
- 【Algorithm】字符串编辑距离（Levenshtein距离）C++算法实现
算法实现比较简单,但算法原理不明白,有空了再研究一下. unsigned LevenshteinDistance(const string& s1, const string& s2) ...