原生 js 实现 vue 的某些功能
1、数据双向绑定:https://www.cnblogs.com/yuqing-o605/p/6790709.html?utm_source=itdadao&utm_medium=referral 或 https://blog.csdn.net/lgysjfs/article/details/85251865(推荐这个,这里还包含了 虚拟dom的实现)
<input type="text" id="aa"/>
<span id="bb"></span>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
演示地址:https://kevin3623.github.io/demo/%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html
另外:因为 defineProperty 有缺陷,所以 vue3 开始使用 Proxy 实现数据双向绑定了。https://www.cnblogs.com/tugenhua0707/p/10306793.html
2、
设计es6的概念:
1、 Object.defineProperty 的作用:https://www.cnblogs.com/gaoning/p/8335748.html 或 https://www.cnblogs.com/weiqu/p/5860945.html (推荐这个)或 https://www.cnblogs.com/tugenhua0707/p/10261170.html
关键点:Object.defineProperty 设置的 对象的属性,一旦这个属性值发送变化,就会执行 set 里面的函数(数据劫持)。
注意:当使用了getter或setter方法,不允许使用writable和value这两个属性
Object.defineProperty的局限性 :https://blog.csdn.net/weixin_43196700/article/details/84033055
2、document.createDocumentFragment() :https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
作用:创建一个新的空白的文档片段( DocumentFragment)。
3、
原生 js 实现 vue 的某些功能的更多相关文章
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 原生js实现vue组件功能
在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- 原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
- 原生js开发vue的双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生js模仿下拉刷新功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简易评论更新功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 第 12 章 python并发编程之协程
一.引子 主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只用一个)情况下实现并发,并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的任务(切换由操作 ...
- CentOS7.4伪分布式搭建 hadoop+zookeeper+hbase+opentsdb
前言 由于hadoop和hbase都得想zookeeper注册,所以启动顺序为 zookeeper——>hadoop——>hbase,关闭顺序反之 一.前期准备 1.配置ip 进入文件编辑 ...
- 【ABAP系列】SAP ABAP模块-任意report作为附件以邮件形式发送
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-任意rep ...
- 【Unity练习】 平衡球Demo
链接:http://pan.baidu.com/s/1pKEpnIz 密码:btke
- CentOS删除Applications中的菜单项
有时候会错误的安装一些软件,可能安装被不成功,但是在左上角的Applications菜单中还是会显示出来,让人很不爽. 现在介绍一个删除掉CentOS Applications中菜单项的方法: 1.安 ...
- telnet访问出现telnet:Unable to connect to remote host: No route to host
Linux下的防火墙默认是不允许telnet服务通过的,所以,当防火墙不允许telnet服务通过时就会出现上面的这种情况,可以将防火墙关闭或者勾选允许telnet服务即可解决如上的问题.
- 一波骚操作,我把 SQL 执行效率提高了 10,000,000 倍!
作者:风过无痕-唐 http://www.cnblogs.com/tangyanbo/p/4462734.html 场景 我用的数据库是mysql5.6,下面简单的介绍下场景 课程表: create ...
- luoguP1965 转圈游戏(NOIP2013)(快速幂)
luogu P1965 转圈游戏 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include ...
- [fw]Linux下tty/pty/pts/ptmx详解
基本概念: 1> tty(终端设备的统称):tty一词源于Teletypes,或者teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘通过阅读和发送信息的东西,后来这东 ...
- Helm教程
1.概述 Helm是k8s的包管理工具,类似Linux系统常用的 apt.yum等包管理工具. 使用helm可以简化k8s应用部署 2.基本概念 Chart:一个 Helm 包,其中包含了运行一个应用 ...