vue双向数据绑定的简单实现

参考教程：链接

<!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>Document</title>

</head>

<body>

    <div id="app">

     <input type="text" id="txt">

     <p id="show-txt"></p>

    </div>

    <script>

     var obj = {}

     Object.defineProperty(obj, 'txt', {

      get: function () {

       return obj

      },

      set: function (newValue) {

       document.getElementById('txt').value = newValue

       document.getElementById('show-txt').innerHTML = newValue

      }

     })

     document.addEventListener('keyup', function (e) {

      obj.txt = e.target.value

     })

    </script>

   </body>

</html>

vue双向数据绑定的简单实现的更多相关文章

  1. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  2. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  3. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  4. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

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

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

  6. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  7. 详解 vue 双向数据绑定的原理，并实现一组双向数据绑定

    1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...

  8. vue双向数据绑定的原理-object.defineProperty() 用法

    有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...

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

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

随机推荐

  1. Java入门（七）：方法

    方法,在日常生活中可以理解成解决问题或处理事情的技巧,一个方法的形成,需要思考和分析,从而形成一步一步的步骤,最后在实际执行过程中验证自己的思路.在Java中,方法的形成亦是如此. 方法,指用于封装一 ...

  2. 自定义实现HashMap的put、get方法

    public class HashMap{ public static void main(String[] args){ put("aa", "wo ai ni&quo ...

  3. MySql 中文写入数据库乱码及Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1解决

    一.中文写入乱码问题 我输入的中文编码是 urf8 的,建的库是 urf8 的,但是插入MySQL总是乱码,一堆"???????????????????????".可以使用以下的方 ...

  4. ArcMap2Sld:一个将MXD中图层配图样式转换为OGC的SLD文件的开源工具

    在一个项目中,用户采用GeoServer做为GIS服务器(原因嘛当然是免费能省钱,经过验证可能还会在性能和稳定性等表现力也有优越性),但是手上收集的数据都是ESRI格式的,这倒不打紧,因为GeoSer ...

  5. Scrapy 框架 使用 selenium 爬取动态加载内容

    使用 selenium 爬取动态加载内容 开启中间件 DOWNLOADER_MIDDLEWARES = { 'wangyiPro.middlewares.WangyiproDownloaderMidd ...

  6. WPF模板（一）详细介绍

    本次随笔来源于电子书,人家的讲解很好,我就不画蛇添足了. 图形用户界面应用程序较之控制台界面应用程序最大的好处就是界面友好.数据显示直观.CUI程序中数据只能以文本的形式线性显示,GUI程序则允许数据 ...

  7. centos 6.9修改系统默认字符集

    [root@ckh ~]# locale –a #列出系统所支持的所有字符集 aa_DJ aa_DJ.iso88591 aa_DJ.utf8 aa_ER aa_ER@saaho aa_ER.utf8 ...

  8. ubuntu1604配置ss代理

    1 安装ss 参考http://www.cnblogs.com/mdzz/p/10140066.html sudo apt install python3-pip sudo pip3 install ...

  9. nginx让所有的http地址重定向到https

    问:为什么让所有的http都重定向到https呢?答:因为这样会使网站更安全些. 那么我是如何在nginx配置,让输入http://www.youcongtech.com或者youcongtech.c ...

  10. C语言数组求长度

    1.创建数组 ,,,,};/*创建一个int型数组,数组的长度为5*/ 2.利用sizeof求一维数组长度 int len; len = sizeof(a)/sizeof(int); Δ以上求数组长度 ...