第三方精简版实现

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. AndroidTips：解决Dialog全屏显示以及Dialog显示自动弹出输入法

    继承实现一个dialog,并在onCreate里面做处理. @Override  protected void onCreate(Bundle savedInstanceState) {      s ...

  2. Codeforces Round #375 (Div. 2) - A

    题目链接:http://codeforces.com/contest/723/problem/A 题意:在一维坐标下有3个人(坐标点).他们想选一个点使得他们3个到这个点的距离之和最小. 思路:水题. ...

  3. mongodb学习02基础知识

    文档 键值对的一个有序集 文档被表示为对象 文档必须有一个 _id 键 {"greeting" : "Hello, world!"}` 键 文档的键是字符串 区 ...

  4. 读书笔记和sprint总结

    第八章  需求分析 主要是讲需求的分析,对于一个程序项目来说,我觉得,需求是这个项目的向导,他可以决定程序项目会发展成什么样子.书里面需求这里大致分为两个:软件需求和用户需求. 软件需求:我们不仅仅要 ...

  5. LightOJ1298 One Theorem, One Year（DP + 欧拉函数性质）

    题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1298 Description A number is Almost- ...

  6. WPF: 旋转Thumb后，DragDelta移动距离出错的解决

    当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉. <Grid x:Name="gridMain" Width="100" Height=" ...

  7. HDU 2836 (离散化DP+区间优化)

    Reference:http://www.cnblogs.com/wuyiqi/archive/2012/03/28/2420916.html 题目链接: http://acm.hdu.edu.cn/ ...

  8. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  9. 移动前端头部标签(HTML5 head meta)

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...

  10. [知识点]SPFA算法

    // 此博文为迁移而来,写于2015年4月9日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vx93.html 1.前言 ...