实现Vue-MVVM-step1
一个利用defineProperty实现的MVVM双向数据绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-MVVM</title>
</head>
<body>
<input type="text" id="input1" value="" oninput="myFun()" />
<input type="text" id="input2" />
</body>
<script>
function myFun() {
o._data.test = document.getElementById('input1').value
}
/* 这个函数用来模拟视图更新 */
function cb(val) {
console.log('试图更新啦~~');
document.getElementById('input2').value = val
}
/* 遍历所有属性的方式对该对象的每一个属性都通过 defineReactive */
function observer(value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
defineReactive(value, key, value[key]);
})
}
/* 实现对对象的「响应式」 */
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true, // 能否被遍历，比如 for in，默认值为 false
configurable: true, // 描述该属性的描述符能否被改变，默认值为 false
get: function reactiveGetter() { // 取值的时候调用，默认值为 false
return val;
},
set: function reactiveSetter(newVal) { // 设置值的时候使用
if (newVal === val) return;
cb(newVal);
}
});
}
/* 声明类 */
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data)
}
}
/* 创建实例 */
var o = new Vue({
data: {
test: ""
}
})
</script>
</html>
实现Vue-MVVM-step1的更多相关文章
- 直播课（1）如何通过数据劫持实现Vue(mvvm)框架
19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...
- vue mvvm原理与简单实现 -- 上篇
Object.defineProperty介绍-- let obj = {}; Object.defineProperty(obj,'school',{ configurable : true, // ...
- Vue - MVVM模式及优点
MVVM模式 视图层和数据层的双向绑定,让我们无需再去关心DOM操作的事情,更多的精力放在数据和业务逻辑上去 MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想. Mod ...
- Vue MVVM模型原理
最近反思了下自己,觉得自己很急躁,学技术总是觉得能用就行了,其实这样很不好,总是这样,就永远只能当用轮子的人.好了,废话不多说,转入正题: 要理解MVVM的原理,首先要理解它是什么,怎么运作起来的: ...
- WPF之MVVM(Step1)——自己实现ICommand接口
开发WPF应用程序,就不得不提MVVM.下面偶将展示MVVM中简单的实现,其中主要在于ICommand的实现上,不过这种实现方式,应该不会有多少人在开发中使用,在此仅作学习使用. 准备: 界面绘制,简 ...
- 通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式
Vue MVVM设计模式: 在使用vue进行编程时,不会再涉及到DOM的操作,取而代之的是修改数据层,当把数据进行变更的时候,vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面. 编码时不 ...
- Vue中MVVM模式的双向绑定原理 和 代码的实现
今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据 MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...
- 剖析手写Vue，你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- mvvm模式和mvc模式 概述总结对比
1.mvc模式简介: MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范.例如: angular ...
随机推荐
- Sphinx以及coreseek的安装及使用 .No1
检索结构php -> sphinx -> mysql非结构化数据又叫全文数据,非固定长度字段例如文章标题搜索这类适用sphinx 全文数据搜索:顺序扫描 : 如like查找索引扫描 : 把 ...
- 学习POC框架pocsuite--编写hellowordPOC
在这里,首先向安全圈最大的娱乐公司,某404致敬. 参考博文 https://www.seebug.org/help/dev 向seebug平台及该文原作者致敬,虽然并不知道是谁 长话短说其实,可自由 ...
- 域渗透学习预备知识-IPC$的入侵防御
一.什么是IPC$ 以下段落引文自:http://www.xfocus.net/articles/200303/493.html IPC$(Internet Process Connection)是共 ...
- python实现HTTP代理的思路和Demo
一.首先什么是代理: 代理其实就是中间转发的那个玩意,所以在代码逻辑上也是如此的. 二.Python写http代理的基本逻辑: (1)接受浏览器发出的请求,解析,拼凑成该有的样子,然后使用套接字发出去 ...
- 【BZOJ4559】[JLoi2016]成绩比较 动态规划+容斥+组合数学
[BZOJ4559][JLoi2016]成绩比较 Description G系共有n位同学,M门必修课.这N位同学的编号为0到N-1的整数,其中B神的编号为0号.这M门必修课编号为0到M-1的整数.一 ...
- go练习5--生成md5
import "crypto/md5" import "encoding/hex" //go 生成 md5 func T4_1() { m := md5.New ...
- Eclipse常用快捷键 及 不格式化注释
eclipse不格式化注释 - [自写] 2007-08-15 刚才在Eclipse3.2上写东西,我写好的注释,整整齐齐的,我一格式化代码,就变得七七八八的了． 试着在Perferences ...
- oracle数据库实例状态
1.已启动/不装载(NOMOUNT).启动实例,但不装载数据库. 该模式用于重新创建控制文件,对控制文件进行恢复或重新创建数据库.2.已装载(MOUNT).装载数据库,但不打开数据库. 该模式用于更改 ...
- mysql 选择优化的数据类型
选择最小的数据类型,因为它们占更少的磁盘,内存和CPU缓存: 选择简单的数据类型,如用整型来存储ip: http://blog.csdn.net/lyd518/article/details/2070 ...
- input输入框制定输入数据类型匹配
<input type="text" id="price_169" value="97" style="max-width: ...