<!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. 2019-2020-1 20199303《Linux内核原理与分析》第三周作业

    操作系统是如何工作的 除了存储程序计算机和函数调用堆栈机制,还有一个非常基础的概念就是中断,这三个关键性的方法机制可以称作计算机的三个法宝:程序存储计算机.函数调用.中断 堆栈的作用:记录函数调用框架 ...

  2. 利用sqlalchemy 查询视图

    这个问题 google 百度 中英文搜了一上午.最新的回答还是 7年前.最后自己靠着官方文档的自己改出来一个比较方便的方法 使用环境 python == 3.7.0 SQLAlchemy === 1. ...

  3. SUSE CaaS Platform 4 - 简介

    SUSE CaaS Platform KUBERNETES - 面向企业 SUSE CaaS Platform 是一款企业级容器管理解决方案,可让 IT 和 DevOps 专业人士更轻松地部署.管理和 ...

  4. java架构之路-（spring源码篇）springIOC容器源码解析（上）

    我们这次来叭叭一下Spring的源码,这次博客主要来说说Spring源码,先粗略的撸一遍,下篇博客选几个重点去说,由于过于复杂,我也是看了一点点,我们先来过一遍源码,然后上流程图,最后我们再回头总结一 ...

  5. Go语言操作MySQL

    MySQL是常用的关系型数据库,本文介绍了Go语言如何操作MySQL数据库. Go操作MySQL 连接 Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的 ...

  6. Xshell、Xftp 5、6 解决“要继续使用此程序,您必须应用最新的更新或使用新版本”

    今天打开Xshell.Xftp,突然弹出“要继续使用此程序,您必须应用最新的更新或使用新版本”. 后来经过一番搜索发现,XShell配置文件中写入了强制升级时间,这个版本是2017年12月27日发布的 ...

  7. mac下idea中安装docker插件

    idea中安装docker插件: 点击Intellij IDEA->Preferences...->Plugins->Browse repositories...如下: 点击Inst ...

  8. HashMap的结构以及核心源码分析

    摘要 对于Java开发人员来说,能够熟练地掌握java的集合类是必须的,本节想要跟大家共同学习一下JDK1.8中HashMap的底层实现与源码分析.HashMap是开发中使用频率最高的用于映射(键值对 ...

  9. .NET Core ❤ gRPC

    这篇内容主要来自Microsoft .NET团队程序经理Sourabh Shirhatti的博客文章:https://grpc.io/blog/grpc-on-dotnetcore/, .NET Co ...

  10. Numpy数组解惑

    参考: 理解numpy的rollaxis与swapaxes函数:https://blog.csdn.net/liaoyuecai/article/details/80193996 Numpy数组解惑: ...