<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" name="" id="input" value="" />

        <h1></h1>

        <h3 id="username"></h3>

        <h4 id="age"></h4>

        <script type="text/javascript">

            var inputText = document.querySelector('#input')

            var h1 = document.querySelector('h1')

            var h3 = document.querySelector('#username')

            var age = document.querySelector('#age')

            inputText.oninput = function(){

                var value =  inputText.value

                h1.innerHTML = value;

            }

            var obj = {

//                name:'张三',

                age:14,

                set name(value){

//                    console.log(value)

                    this._name = value

                    h3.innerHTML = this._name

                },

                get name(){

                    return this._name

                },

            }

            console.log(obj)

            //setter,getter//es6,es2015标准

            //在给对象属性赋值，或者是获取对象属性的时候，会调用setter、getter两个方法

        </script>

    </body>

</html>

vue的数据双向绑定的更多相关文章

  1. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

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

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

  3. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  4. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  5. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  6. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  7. 一、vue的数据双向绑定的实现

    响应式系统 一.概述 Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ...

  8. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  9. Vue的数据双向绑定原理——Object-defineProperty

    一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...

  10. vue v-model 数据双向绑定（笔记）

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

随机推荐

  1. Hadoop点滴-外围概念

    有句话说的好“大数据胜于好算法” 硬盘存储容量在不断提升的同时,访问速度(硬盘数据读取速度)却没有同步增长:1990年,访问全盘需要5分钟,20年后,需要2.5小时 不同的业务大数据,存储在一套HDF ...

  2. 阿里云centos6.9搭建fastDFS文件服务器

    准备压缩包: 1.fastdfs-nginx-module_v1.16.tar.gz 2.FastDFS_v5.05.tar.gz 3.libfastcommonV1.0.7.tar.gz 4.ngi ...

  3. springboot新版本（2.0.0+）自定义ErrorController中使用ErrorAttributes

    2.0.0之前使用: @Autowired private ErrorAttributes errorAttributes; private Map<String, Object> get ...

  4. Git tag相关命令

    常见命令如下: // 查看标签,可加上参数-l(列表形式列出) -n(附加说明) git tag [-l -n] // 查看符合检索条件的标签 git tag -l .*.* // 查看对应标签状态 ...

  5. PLSQL常用设置-提高开发效率

    1.登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ...

  6. 什么是VR中的Locomotion？

    Locomotion,本文中我称之为移位,是VR研究中最重要的话题之一.因为它属于VR中三大元老级操作(Selection选择,Manipulation操纵物体,Locomotion移位),其中,前两 ...

  7. 前端深入之css篇|link和@import到底有什么区别？

    写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...

  8. ng的显示与隐藏

    显示与隐藏有很多中方法,但是在ng中有自己的显示与隐藏的方法 ng-if 或者[hidden] 在此主要介绍的是[hidden] 在ng中需要摒弃dom操作的方法,使用[hidden] 使用方法: e ...

  9. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Docker

    对于一个 .NET Core开发人员,你可能没有使用过Docker,但是你不可能没有听说过Docker.Docker是Github上最受欢迎的开源项目之一,它号称要成为所有云应用的基石,并把互联网升级 ...

  10. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...