第三方精简版实现

https://github.com/luobotang/simply-vue
Object.defineProperty 学习，打开控制台分别输入以下内容调试结果

  • userInfo.fuck = "abc"

  • userInfo.fuck

  • userInfo.xxoo = "xxoo"

  • userInfo.xxoo
<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

    <title></title>

</head>

<body>

    <div>

    <p>你好，<span id='nickName'></span></p>

    <div id="introduce"></div>

</div>　　　　

</body>

<script type="text/javascript">

window.userInfo = {};

Object.defineProperty(userInfo, "fuck", {

    get: function(){

        console.log("当执行userInfo.fuck的时候，会触发get函数");

        return document.getElementById('nickName').innerHTML;

    },

    set: function(nick){

        console.log("当执行userInfo.fuck = abc 的时候，会触发set函数");

        document.getElementById('nickName').innerHTML = nick;

    }

});

Object.defineProperty(userInfo, "xxoo", {

    get: function(){

        console.log("当执行userInfo.xxoo的时候，会触发get函数");

        return document.getElementById('introduce').innerHTML;

    },

    set: function(introduce){

        console.log("当执行userInfo.xxoo = abc 的时候，会触发set函数");

        document.getElementById('introduce').innerHTML = introduce;

    }

})

</script>

</html>

Vue 双向数据绑定原理分析 以及 Object.defineproperty语法的更多相关文章

  1. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  2. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  3. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  4. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  5. Vue双向数据绑定原理解析

    基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调 ...

  6. 手写MVVM框架 之vue双向数据绑定原理剖析

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

  7. Vue双向绑定的关键：Object.defineProperty()

    这个方法了不起啊.vue.js和avalon.js 都是通过它实现双向绑定的.而且Object.observe也被草案发起人撤回了.所以defineProperty更有必要了解一下了. 先上几行代码看 ...

  8. vue 双向数据绑定原理

    博客地址: https://ainyi.com/8 采用defineProperty的两个方法get.set 示例 <!-- 表单 --> <input type="tex ...

  9. Vue双向数据绑定原理

    https://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

随机推荐

  1. hdu 2546 饭卡 删除一个数的01背包

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  2. 51nod 1051 求最大子矩阵和

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1051 1051 最大子矩阵和 基准时间限制:2 秒 空间限制: ...

  3. HTTP基础06--网络安全

    HTTP 的缺点 通信使用明文可能会被窃听 HTTP 报文使用明文(指未经过加密的报文)方式发送. 通信的加密 用 SSL 建立安全通信线路之后,就可以在这条线路上进行 HTTP 通信了.与 SSL ...

  4. 解决Kali Linux没有声音

    解决Kali Linux没有声音   Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下: (1)在终端执行命令:systemctl --user enab ...

  5. 最火的.NET开源项目

    综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...

  6. 我的c++学习(4) C++输入输出格式的控制

    默认进制:默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. #include &qu ...

  7. 向量时钟Vector Clock in Riak

    Riak 是以 Erlang 编写的一个高度可扩展的分布式数据存储,Riak的实现是基于Amazon的Dynamo论文,Riak的设计目标之一就是高可用.Riak支持多节点构建的系统,每次读写请求不需 ...

  8. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  9. Unity 逐步旋转

    npc.transform.rotation = Quaternion.Slerp(npc.transform.rotation, Quaternion.LookRotation(moveDir), ...

  10. php访问url的四种方式

    1.fopen方式//访问指定URL函数 function access_url($url) { if ($url=='') return false; $fp = fopen($url, 'r')  ...