// js部分index.js

class Myvue{
constructor(options){
this.data = options.data;
this.dep = new Dep();
var id = options.el;
this.observe();
var Dom = this.VnodeContainer(document.querySelector(id));
document.querySelector(id).appendChild(Dom);
}
VnodeContainer(node,flag){ // 虚拟DOM容器
var flag = flag || document.createDocumentFragment();
var child;
while(child = node.firstChild){
this.compile(child);
flag.appendChild(child);
this.VnodeContainer(child,flag);
}
return flag;
}
compile(node){ // 编译DOM
let reg = /\{\{(.*)\}\}/g;
if(node.nodeType === ){ // 元素类型
let attr = node.attributes;
for(let i=;i<attr.length;i++){
if(attr[i].nodeName === 'v-model'){
let name = attr[i].nodeValue;
node.addEventListener('input',(e)=>{
this.data[name] = e.target.value;
});
node.value = this.data[name]; this.dep.add(new Watcher(this.data,node,name));
}
}
}
if(node.nodeType === ){ // text类型节点
if(reg.test(node.nodeValue)){
let name = RegExp.$; // 匹配到的字符串
name = name.trim();
node.nodeValue = this.data[name]; this.dep.add(new Watcher(this.data,node,name));
}
}
}
observe(){
Object.keys(this.data).forEach((el)=>{
this.definePropertyInit(this.data,el,this.data[el]);
});
}
definePropertyInit(target,key,value){ // 将data做成响应式的 Object.defineProperty(target,key,{
get:()=>{
return value;
},
set:(newVal)=>{
if(newVal === value) return;
value = newVal;
this.dep.notify(); // 更新
}
});
}
}
class Dep{ // 发布者
constructor(){
this.subs = [];
}
add(sub){
this.subs.push(sub);
}
notify(){
this.subs.forEach((el)=>{
el.update();
});
}
}
class Watcher{ // 观察者(订阅者)
constructor(vm,node,name){
Dep.global = this;
this.vm = vm;
this.node = node;
this.name = name;
this.update();
}
update(){
this.get();
switch (this.node.nodeType) {
case : // 标签元素
this.node.value = this.value;
break;
case : // 文本
this.node.nodeValue = this.value;
break;
default: break;
}
}
get(){
this.value = this.vm[this.name];
}
} let vm = new Myvue({
el: '#app',
data: {
msg: 'hello'
}
})

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> <div id="app">
<input type="text" id="input" v-model='msg'>
<div id="box">{{msg}}</div>
</div> <script src='./index.js'></script>
</body>
</html>

myvue 模拟vue核心原理的更多相关文章

  1. FinClip 前端之 VUE 核心原理总结

    小程序框架有很多,都是支持前端JavaScript语言的,也是支持 vue.js 框架的.FinClip 小程序是兼容各家平台的.所以在学习了框架使用之后的进阶就要熟悉框架的底层原理. 1.数据响应式 ...

  2. 通过模拟Mybatis动态代理生成Mapper代理类,讲解Mybatis核心原理

    本文将通过模拟Mybatis动态代理生成Mapper代理类,讲解Mybatis原理 1.平常我们是如何使用Mapper的 先写一个简单的UserMapper,它包含一个全表查询的方法,代码如下 pub ...

  3. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  4. 19. vue的原理

    vue:原理1 => Object.defineProperty 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Obj ...

  5. SPA 路由三部曲之核心原理

    为了配合单页面 Web 应用快速发展的节奏,近几年,各类前端组件化技术栈层出不穷.通过不断的版本迭代 React.Vue 脱颖而出,成为当下最受欢迎的两大技术栈. 仅 7 个月的时间,两个技术栈的下载 ...

  6. vue - vue基础/vue核心内容(终结篇)

    今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...

  7. 模拟Vue之数据驱动2

    一.前言 在随笔“模拟Vue之数据驱动1”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗? 如下: 倘若user中的name.age属性变化,如何知道它们变化了 ...

  8. 模拟Vue之数据驱动4

    一.前言 在"模拟Vue之数据驱动3"中,我们实现了为每个对象扩展一个$set方法,用于新增属性使用,这样就可以监听新增的属性了. 当然,数组也是对象,也可以通过$set方法实现新 ...

  9. Python面向对象篇之元类,附Django Model核心原理

    关于元类,我写过一篇,如果你只是了解元类,看下面这一篇就足够了. Python面向对象之类的方法和属性 本篇是深度解剖,如果你觉得元类用不到,呵呵,那是因为你不了解Django. 在Python中有一 ...

随机推荐

  1. 数据库表结构查询SQL

    今天给大家送上两个SQL查询的方法,也许在项目中你都用过,但是,没关系,仅仅记录下,以便后面不用去查找.针对与经常写SQL的同行来说,应该是非常简单的. 查询表结构数据 SELECT t.COLUMN ...

  2. 数据库-第三章 关系数据库标准语言SQL-3.3 数据查询

    数据查询 例: 一.单表查询 1.定义 是指仅涉及一个表的查询 2.选择表中的若干列 查询指定列 例: 查询全部列 例: 查询经过计算的值 例: 3.选择表中的若干元组 消除取值重复的行 例: 查询满 ...

  3. shell编程之循环语句

    for #! /bin/sh for FRUIT in apple banana pear; do echo "I like $FRUIT" done while #! /bin/ ...

  4. 《Explaining and harnessing adversarial examples》 论文学习报告

    <Explaining and harnessing adversarial examples> 论文学习报告 组员:裴建新   赖妍菱    周子玉 2020-03-27 1 背景 Sz ...

  5. django复习 以及源码

    django请求生命周期 在浏览器上输入网址会发生什么事?(地址会朝我对应的ip地址发送get请求,get请求遵循http协议)先进入实现了wsgi协议的web服务器---->进入django- ...

  6. vue采坑记录

    1.项目在浏览器运行的时候没有ico图标 <link rel="shortcut icon" type="image/x-icon" href=" ...

  7. bugku论剑场web解题记录

    前言 国庆这几天感觉没什么好玩的地方,家又离的太远,弱鸡的我便决定刷刷题涨涨知识,于是就有了这篇文章.. 正文 写的不对的地方欢迎指正 web26 打开直接就是代码,这应该就是一道代码审计的题了 这里 ...

  8. OpenCV-Python 图像阈值 | 十五

    目标 在本教程中,您将学习简单阈值,自适应阈值和Otsu阈值. 你将学习函数cv.threshold和cv.adaptiveThreshold. 简单阈值 在这里,问题直截了当.对于每个像素,应用相同 ...

  9. dapp 是什么?dapp 和 app 有什么区别?一文明白 dapp。

    DApp 是 decentralized application 中文分布式 APP 的缩写. 一个 DApp 有后台代码运行在分布式点对点网络中.传统的 APP 的后台代码是运行在中心化的服务器. ...

  10. 本机安装oracle12C

    1.先安装的oracle12C,创建了oracle主目录用户admin,其中主目录用户为admin,口令为123456. 2.其次创建监听,再创建数据库实例. 3.全局数据库名称为orcl.lan,管 ...