第三方精简版实现

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. 【转】Spark性能优化指南——基础篇

    http://mp.weixin.qq.com/s?__biz=MjM5NDMwNjMzNA==&mid=2651805828&idx=1&sn=2f413828d1fdc6a ...

  2. FileSeek文件内容搜索工具下载

    Windows 内建的搜索功能十分简单,往往不能满足用户的需要.很多的第三方搜索工具因此诞生,比如 Everything,Locate32等. 而FileSeek也是一款不错的搜索工具,其不同于其他搜 ...

  3. 解决js小数求和出现多位小数问题

    在小数相加时,可能会产生多个小数位.如下所示: var x=1+1;   //2 var x=1.20+1.11;   //2.31 var x=1.56+1.76;   //3.3200000000 ...

  4. bootstrap datetimepicker 中只显示年或者只显示月份

    1.只显示datetimepicker  日历中只显示年份 $("#day-access-calendar").datepicker({ startView: 2, maxView ...

  5. 三进制状压 HDOJ 3001 Travelling

    题目传送门 题意:从某个点出发,所有点都走过且最多走两次,问最小花费 分析:数据量这么小应该是状压题,旅行商TSP的变形.dp[st][i]表示状态st,在i点时的最小花费,用三进制状压.以后任意进制 ...

  6. 解决嵌入WinForm的WPF控件无法显示图片问题

    解决办法是在控件初始化时,通过下面方法再次加载图片: ucCanvas.CreateCoordinateImage.Source = GetImageIcon(global::MainApplicat ...

  7. 【BZOJ4034】[HAOI2015]树上操作 树链剖分+线段树

    [BZOJ4034][HAOI2015]树上操作 Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 ...

  8. 【BZOJ1864】[Zjoi2006]三色二叉树 树形DP

    1864: [Zjoi2006]三色二叉树 Description Input 仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次表示最多和最 ...

  9. （转）distcp从ftp到hdfs拷贝文件

    link :http://blog.csdn.net/sptoor/article/details/11523469 distcp从ftp到hdfs拷贝文件: hadoop distcp ftp:// ...

  10. [Cocos2D-x For WP8]ParallaxNode视差

    视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异.从目标看两个点之间的夹角,叫做这两个点的视差角,两点之间的距离称作基线.只要知道视差角度和基线长度,就可以计算出目标和观测者之间的距离.游 ...