<!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. Python类(七)-类的特殊成员方法

    __doc__ 用来表示类的描述信息 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" class Person(object) ...

  2. C# EntityFramwork(Model First)使用要点

    本文介绍EntityFramework使用方法 Entity Framework的注意点 由于安装和操作的细节讲起来很琐碎,这部分只罗列出难点,其他细节请自行查阅 安装细节 Pluralize or ...

  3. CDM中，实体与实体快捷方式之间的联系不能重复，否则会造成外键重复

    例如机场实体和跑道实体,例如: 在机场包中,跑道实体作为快捷方式出现,机场实体与跑道快捷方式实体间有连线关系,然而 在跑道包中,情况相反,但二者间也有连线.(模型原样) 要注意的是,虽然在两个包中都有 ...

  4. ghld data format

    %CTF: 1.00%FileType: PROF strp "VelocityProfile"%PROFSpec: 1.00 2006 00 00%Manufacturer: C ...

  5. windows配置apache tomcat 集群

      1,安装包 httpd-2.2.22-win32-x86-no_ssl.msi 两个tomcat6 2,配置apachehttpd---配置的过程中有错误可以查看logs文件夹下的log文件进行排 ...

  6. Java中自定义枚举（Enum）项的值,可设置为指定的值

    一.代码 package base.lang; /** * ClassName: StateEnum  * @Description: TODO * @author fuming * @date 20 ...

  7. Sandbox简介和路径获取

    一.简介 iOS的沙盒机制,每个应用只能访问自己应用目录下的文件.iOS应用产生的内容,如文件.缓存内容等都必须存储在自己的沙盒内.默认情况下,每个沙盒含有3个文件夹:Documents, Libra ...

  8. eclipse中的TODO和FIXME

    最近使用eclipse开发代码时,公司要求按他们制定代码规范编写代码,其他都还好,因为基本都养成良好习惯了,但TODO和FIXME就有点陌生,查了一下资料,发现笔者寡闻了,果然学海无涯,好了,下边解释 ...

  9. centos系统查看本机IP地址

    centos系统查看本机IP地址,输入 ifconfig -a查看 centos查询上网公网IP输入 curl ifconfig.me 命令即可查看 centos查询上网网关IP,tracepath  ...

  10. winform 打印

    pageSetupDialog 打印设置,和对话框控件差不多的套路,把控件拖到窗口中后,会在下方显示, 然后在制作的菜单中找到打印设置,双击进入点击事件写代码 按照之前的套路, DialogResul ...