<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue双向绑定的原理测试</title>

</head>

<body>

    手写一个简单双向绑定<br />

    <input type="text" id="model"><br />

    <div id="modelText"></div>

    <script>

        /*

         * @Author: 曾经的水哥  https://www.cnblogs.com/cengjingdeshuige/

         * @Date: 2018-09-25 15:14:59

         * @Last Modified by: mikey.zhaopeng

         * @Last Modified time: 2018-09-25 15:15:50

         */

        var user = {};

        var defaultName = '2222222222ssas'

        var model = document.querySelector("#model")

        var modelText = document.querySelector("#modelText");

        model.value = defaultName

        modelText.textContent = defaultName

        // 定义属性 监控改变

        Object.defineProperty(user, 'name', {

            get: function () {

                console.log('获取值')

                return defaultName

            },

            set: function (newValue) {

                console.log('设置新的值')

                defaultName = newValue

                model.value = newValue

                modelText.textContent = newValue

            }

        })

        model.addEventListener('keyup', function () {

            user.name = this.value

            console.log('取值')

        }, false)

        // 获取值

        console.log(user.name)

    </script>

</body>

</html>

vue实现双向绑定的简单原理: defineProperty的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  4. vue的双向绑定原理浅析与简单实现

    很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...

  5. Vue双向绑定的实现原理系列（一）：Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  6. Vue双向绑定的实现原理及简单实现

    vue数据双向绑定原理   vue数据双向绑定是通过(数据劫持)+(发布者-订阅者模式)的方式来实现的,而所谓的数据劫持就是通过Object.defineProperty() 来实现的,所谓的Obje ...

  7. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  8. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  9. vue双向绑定的简单实现（原创）

    简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...

随机推荐

  1. day13_雷神_前端01

    #前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...

  2. 一个linux内核编译时遇到的perl语法导致的编译问题解决

    在编译linux内核时,遇到了一个比较诡异的问题.具体log如下: Can't locate strict.pm in @INC (you may need to install the strict ...

  3. iOS开发笔记（Swift）－针对Swift调用PPiFlatSegmentedControl项目的一些修改

    PPiFlatSegmentedControl项目是一个很流行的开源iOS控件库,提供了扁平化风格(Flat style)的SegmentedControl,可以自定义segment的颜色,图标.大小 ...

  4. 看看一个老程序员如何手写SpringMVC！

    人见人爱的Spring已然不仅仅只是一个框架了.如今,Spring已然成为了一个生态.但深入了解Spring的却寥寥无几.这里,我带大家一起来看看,我是如何手写Spring的.我将结合对Spring十 ...

  5. android_安装包_NoClassDefFoundError

    说说这个问题出现的地方吧: 能够成功的打包安装包,但是在安装包安装后,准备运行时出现了这个问题. 查看了这篇文章,讲得有理有据,并没有解决我的问题. 通过谷歌查找到这个stackoverflow,解决 ...

  6. 从零开始学 Web 之 Ajax（六）jQuery中的Ajax

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十二）：解决跨域问题

    什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...

  8. IIS 6 配置

    首先想IIS添加asp.net v4.0的应用池.使用管理员身份在cmd窗口输入如下命令 %windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_regi ...

  9. Python机器学习笔记：利用Keras进行分类预测

    Keras是一个用于深度学习的Python库,它包含高效的数值库Theano和TensorFlow. 本文的目的是学习如何从csv中加载数据并使其可供Keras使用,如何用神经网络建立多类分类的数据进 ...

  10. Python 判断文件/目录是否存在

    使用 os 模块 判断文件是否存在 os.path.isfile(path) 判断目录是否存在 os.path.isdir(path) 判断路径是否存在 # 使用 path 模块 os.path.ex ...