<!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的双向数据绑定的更多相关文章

  1. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  3. 面试题：你能写一个Vue的双向数据绑定吗？

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  4. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  5. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  6. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  7. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  8. 一个关于原生 js 开发一款插件的前端教程

    教程链接: http://www.codeasily.net/course/plugin_course/ 写的不是很好,前面比较松后面比较急,请大家见谅,本人也没多少年前端经验,拿以前写过的教程网站, ...

  9. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

随机推荐

  1. Javascript 4.4

    childNodes属性:可以从给定文档的节点树里把任何一个元素的所有子元素检索出来 返回的值是一个数组,此数组包含给定元素节点的全体子元素:element.childNodes nodeType属性 ...

  2. vue项目打包后的资源路径问题

    最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...

  3. anki_vector SDK源码解析(教程)

    一:最近anki vector robot开放了Python SDK,我听到的第一时间就赶快上网查了查,先抛几个官网重要链接吧: Python编程API手册及环境搭建等: https://sdk-re ...

  4. c# 公元转农历

    void Main() { ,,); GetLunarDisplay(date).Dump(); } public List<string> GetLunarYearList() { va ...

  5. Win10无法访问网上邻居电脑共享的文件夹怎么办

    Win10无法访问网上邻居电脑共享的文件夹怎么办 现在许多电脑上装的都是Win系统,Win10无法访问网上邻居电脑共享的文件夹怎么办呢?下面小编为大家介绍下解决的方法吧! 1点击桌面上的“此电脑”图标 ...

  6. 附录B——MySQL样例表

    vendors表: 储存销售产品的供应商信息,每个供应商在这个表中有一个记录,供应商ID(vend_id)列用来匹配产品和供应商. 列名 vend_id vend_name vend_address ...

  7. C 运算符, 有符号数据运算,

    1.  b++运算 ; ; a = b++ + b++;printf("a=%d\n",a);printf("b=%d\n",b); 输出结果: a=3 b=3 ...

  8. TypeScript安装备忘：npm proxy设置

    如果使用了代理网络,因为npm无法自动识别Internet代理,则需要手动设置npm代理才能下载包. 设置命令:    npm config set proxy http://proxyhost:pr ...

  9. Windows FFMPEG开发环境配置

    1.去FFMPEG网站上下载Dev版本的库,里面有我们需要的头文件和lib文件,然后下载Shared版本的库,里面有我们需要的dll文件 http://ffmpeg.zeranoe.com/build ...

  10. [转]Win2012的 IIS 503 错误

    下载并安装 https://www.microsoft.com/zh-CN/download/details.aspx?id=48145 因为安装了 dotnet-hosting-2.2.3-win. ...