<!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. 【转】CSG（Closed Subscriber Group）闭合用户组

    CSG是3GPP R8中引入的概念,定义为闭合用户组.有以下特点: 1. 每个CSG由一个CSG ID标识 2. 同一用户可属于多个CSG,用户与CSG的关系就好比签约,启用了CSG小区只会允许签约用 ...

  2. socket模型

    Socket: "主机" + "端口" = 套接字/插座; 仅仅是一个通信模型,不属于七层协议(网络协议). 一台电脑(IP)的一个应用程序(端口) 和 另一台 ...

  3. .Net 一直在改变

    Microsoft 微软又进一步了,每天都有惊喜. MSDN,是微软官网开发者技术支持网络,今天给我一个小惊喜,不多说直接上图.分享给大家 右键新打开Tab选项,就能看到官方的源码实现.为我们学习提供 ...

  4. wp8安装SSL证书

    把证书打成zip包,wp8的IE能下载并打开ZIP包,然后点击cer文件,就能安装证书了

  5. 带坑的几道PHP面试题

    第二题 代码如下: $i='11'; printf("%d\n",printf("%d",printf("%d",$i))); 输出结果是多 ...

  6. 如何配置nagios监控SUN(富士通)MX000系列服务器的XSCF

    配置环境说明 192.168.3.80-XSCF地址 192.168.2.80-solaris操作系统IP地址 (nagios客户端) 192.168.2.120-nagios服务器端 check_x ...

  7. WCF上传大文件处理方法

    <system.serviceModel> <bindings> <basicHttpBind> <Binding name=" maxReceiv ...

  8. DAY15-Django模板语言

    Django模板系统 官方文档 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(reque ...

  9. Cookies和Session的定义与区别

    Cookies和Session二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网 ...

  10. linux&nbsp;dev/dsp&nbsp;声卡学习笔记

    原文地址:dev/dsp 声卡学习笔记">linux dev/dsp 声卡学习笔记作者:ziyou飞翔       无论是从声卡读取数据,或是向声卡写入数据,事实上都具有特定的格式(f ...