<!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. install MariaDB 10.2 on Ubuntu 18

    Here are the commands to run to install MariaDB 10.2 from the MariaDB repository on your Ubuntu syst ...

  2. 【开发】iOS入门 - XCode快捷键

    XCode使用第一天,从熟悉快捷键开始... 搜索相关的快捷键: 搜文件.类和方法 - Command + Shift + O 搜字符串 - Command + Shift + F 定位文件 - Co ...

  3. Oracle深入学习

    一.甲骨文公司介绍 甲骨文公司,是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩.1989年正式进入中国市场. 2013年,甲骨文已超越 IBM ,成为继 Microsoft 后全球第二大 ...

  4. Linux第八节课学习笔记

    su命令可以切换用户身份,一般不用,而是用sudo. visudo命令中可执行命令列表不用ALL,我们可以先使用whereis命令找出命令所对应的保存路径,然后把配置文件第99行的用户权限参数修改成对 ...

  5. 汇编实验一 查看CPU和内存，用机器指令和汇编语言指令编程

    在装完DosBox环境之后,就可以用debug模式进行汇编指令的编程了. 实验内容:      首先用a指令进行数据的储存,然后用t命令进行调试. 可以发现ax,bx在不同的命令下发生了改变,cs的地 ...

  6. hsdf -- 6.21 -- day6

    差点忘写总结…… 这么快就到day6了啊 感觉前面写的总结都是苟屁,跟没有有什么区别…… 今天认真总结一下 最大的失误就是全程肝a题,最后还挂了…… 感觉今天方向偏了,由进行一次测试到仅仅是想要尽可能 ...

  7. Azure DevOps Server/Team Foundation Server

    TFS wasn't designed specifically to support a requirements management process. Epics are like big st ...

  8. 解决openstack实例主机名后缀问题

    参考地址https://ask.openstack.org/en/question/26918/change-novalocal-suffix-in-hostname/ 问题现象 可以看到主机名的后缀 ...

  9. 利用chrome浏览器爬取数据

    相关的库自己下载吧,直接上代码 from selenium import webdriver from bs4 import BeautifulSoup import time #手动添加路径 pat ...

  10. webuploader分片上传

    屁话不多说直接上主题; webuploader,sj(WebUploader 0.1.6)网上有下 powerUpload.js 自己写的基与楼上的插件 asp.net mvc/Api 实现效果: H ...