<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue双向数据绑定原理和模拟</title>

</head>

<body>

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

    <br>

    <span id="uName"></span>

</body>

</html>

<script type="text/javascript">

    var obj = {

        pwd:"123456"

    }

    Object.defineProperty(obj,"userName",{

        get:function() {

            console.log('get init')

        },

        set:function(val){

            console.log('set init')

            document.getElementById("uName").innerText = val;

            document.getElementById("userName").value = val;

        }

    })

    document.getElementById("userName").addEventListener("keyup",function(event){

        obj.userName = event.target.value;

    })

</script>

vue两大特征

数据驱动

组件化

vue框架对比

-vue

模板和渲染函数的弹性选择

简单的语法和项目创建

更快的渲染速度和更小的体积

-React

更适用于大型应用和更好的测试性

同时适用于web端和原生app

更大的生态圈带来更多的支持和工具

-相同点

利用虚拟dom实现快速渲染(2.0)

轻量级

响应式组件

支持服务端渲染(vue ssr)

易于集成路由工具 打包工具以及状态管理

vue原理实现的更多相关文章

  1. vue原理相关

    vue原理三大模块:响应式.vdom和diff.模板编译 vue原理要点: 1.组件化 组件化的历史:在vue之前已经有组件化的概念了,想asp.jsp.php等就有组件化的概念,nodejs也有组件 ...

  2. 剖析Vue原理&实现双向绑定MVVM

    转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...

  3. vue原理20181211

    1. 打开浏览器从输入网址到网页呈现出来,经历了什么? 打开浏览器从输入网址到网页呈现出来,经历了什么? 1.1 DNS解析域名 1.2 TCP连接:TCP三次握手 1.3 发送HTTP请求 1.4 ...

  4. vue原理简介

    写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...

  5. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

  6. 剖析Vue原理&实现双向绑定MVVM-2

    vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...

  7. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  8. [转] Vue原理解析——自己写个Vue

    一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...

  9. Vue原理解析——自己写个Vue

    Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...

随机推荐

  1. HDFS之四：HDFS原理解析（总体架构，读写操作流程）

    前言 HDFS 是一个能够面向大规模数据使用的,可进行扩展的文件存储与传递系统.是一种允许文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和 存储空间.让实际上是通过网络来访问文件 ...

  2. idea右键单击没有 svn选项处理办法

    问题一: IntelliJ IDEA打开带SVN信息的项目不显示SVN信息,项目右键SVN以及图标还有Changes都不显示解决方法 在VCS菜单中有个开关,叫Enabled Version Cont ...

  3. Python函数(一)-return返回值

    定义一个函数可以在最后加上return返回值,方便查看函数是否运行完成和返回函数的值 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR&qu ...

  4. IOCP编程原理（转）

    在我的博客之前写了很多关于IOCP的“行云流水”似的看了让人发狂的文章,尤其是几篇关于 IOCP加线程池文章,更是让一些功力不够深厚的初学IOCP者,有种吐血的感觉.为了让大家能够立刻提升内力修为,并 ...

  5. oracle——pl/sql 查询中文乱码

    1.查看服务器端编码select userenv('language') from dual;我实际查到的结果为:AMERICAN_AMERICA.AL32UTF82.执行语句 select * fr ...

  6. 数据库监听。数据库一次notify，Activity多次接收

    今天项目中发现一个bug: (1)当uri数据库中有更新,会从数据库层DataService中通知应用层,调用notifyChange: mContext.getContentResolver().n ...

  7. 一行代码搞定所有屏幕适配AbViewUtil

    适配原理:抛弃google提供的dip理论与多套图片与布局方案,采用与UI设计师通用的px作为标准单位,原理是将UI设计师的设计图与当前查看的手机或其他设备的屏幕像素尺寸进行换算,得到缩放比例,在Ac ...

  8. Swing绘图机制

    ------------------siwuxie095                         工程名:TestSwingPaintMethod 包名:com.siwuxie095.swin ...

  9. WOJ 10 精英选拔

    神仙dp,膜Claris 题意:给一个长度为$n$的数列,求出不超过k次交换后的最大连续子区间和. 发现交换后的最优答案一定是这样的(0和2的长度可以为0)             0        ...

  10. python3-字典的增删改查

    # Auther: Aaron Fan info = { "stull01":"alen zhang", "stull02":"s ...