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 的某些功能的更多相关文章

  1. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  2. 原生js实现vue组件功能

    在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...

  3. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  4. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

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

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

  6. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  7. 原生js开发vue的双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 原生JS实现简易评论更新功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 10 (H5*) js第10天 正则表达式、深浅拷贝

    目录: 1:浅拷贝 2:  深拷贝 3:遍历DOM树 4:正则表达式 5:正则表达式的创建方式 6:字符串中的正则表达式 7:真数组和伪数组 8:  escape()和unescapt() 编码和 解 ...

  2. <搬运> SQL语句百万数据量优化方案

    一:理解sql执行顺序 在sql中,第一个被执行的是from语句,每一个步骤都会产生一个虚拟表,该表供下一个步骤查询时调用,比如语句:select top 10 column1,colum2,max( ...

  3. hibernate validator参数校验&自定义校验注解

    参数校验:简单的就逐个手动写代码校验,推荐用Valid,使用hibernate-validator提供的,如果参数不能通过校验,报400错误,请求格式不正确: 步骤1:在参数对象的属性上添加校验注解如 ...

  4. spring-第二篇ApplicationContext国际化及事件机制

    1.ApplicationContext接口获取spring容器      ApplicationContext是BeanFactory接口的子接口,BeanFactory的常用实现类是Default ...

  5. Spring Boot静态资源

    1.4 SpringBoot静态资源 1.4.1 默认静态资源映射 Spring Boot 对静态资源映射提供了默认配置 Spring Boot 默认将 /** 所有访问映射到以下目录: classp ...

  6. dp(最长升序列)

    http://poj.org/problem?id=2533   题意:给你n(1-1000)个数,求这n个数的最长升序列.   题解:dp[i]表示以第i个数结尾的最长升序列. #include & ...

  7. [CF453C] Little Poney and Summer Sun Celebration (思维)

    [CF453C] Little Poney and Summer Sun Celebration (思维) 题面 给出一张N个点M条边的无向图,有些点要求经过奇数次,有些点要求经过偶数次,要求寻找一条 ...

  8. 消息中间件-技术专区-RocketMQ架构原理

    RocketMQ是阿里开源的分布式消息中间件,跟其它中间件相比,RocketMQ的特点是纯JAVA实现:集群和HA实现相对简单:在发生宕机和其它故障时消息丢失率更低. 一.RocketMQ专业术语 P ...

  9. TP50、TP90、TP99、TP999

    TP=Top Percentile,Top百分数,是一个统计学里的术语,与平均数.中位数都是一类.TP50.TP90和TP99等指标常用于系统性能监控场景,指高于50%.90%.99%等百分线的情况. ...

  10. rpc - rpc 程序号数据库

    SYNOPSIS /etc/rpc DESCRIPTION rpc 文件列出了rpc 程序的可读名, 可以此代替rpc 程序号. 每行包含如下信息: 运行rpc 程序的服务名 rpc 程序号 别名 各 ...