Vue 已经是主流框架了

它的好处也不用多说，都已经是大家公认的了

那我们就来理解一下Vue的单向数据绑定和双向数据绑定

然后再使用JS来实现Vue的双向数据绑定

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。 
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变

双向数据绑定

数据模型（Module）和视图（View）之间的双向绑定。

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

如何使用js达到双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

<br>

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

<script>

    var obj={

        pwd:"1234"

    };

    //主要使用到了get和set方法，最为关键

    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>

</body>

</html>

运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，也就是vue的双向数据绑定的核心点。

利用JS实现vue中的双向绑定的更多相关文章

  1. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  2. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  3. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  4. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  5. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  6. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  7. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  8. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  9. Vue 数据的双向绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. kuangbin带你飞 最短路 题解

    求一个图最短路边的办法.好像下面的那个有问题.单向边和双向边一定是有区别的.这个比较容易.参照该文的最短路网络流题目和连通图题目一题求最短路关节边 另外上述2个题目的代码好像有问题. 在UVALIVE ...

  2. ggplot2绘制多图

    参考链接:http://www.cnblogs.com/nxld/p/6065237.html ggplot2.multiplot是一个易于使用的功能,将多个图形在同一页面上使用R统计软件和GGPLO ...

  3. django的setting文件更换了位置需要进行的更改

    1. Pycharm --> 工具栏 --> Edit Configurations --> 修改 settings 文件 2. 项目文件夹下的wsgi.py 3. 项目文件夹下的m ...

  4. KVM（一）简介及安装

    1. KVM 介绍 1.0 虚拟化简史 其中,KVM 全称是 基于内核的虚拟机(Kernel-based Virtual Machine),它是一个 Linux 的一个内核模块,该内核模块使得 Lin ...

  5. docker从零开始网络（六）Macvlan

    使用Macvlan网络 某些应用程序,尤其是遗留应用程序或监视网络流量的应用程序,希望直接连接到物理网络.在这种情况下,您可以使用macvlan网络驱动程序为每个容器的虚拟网络接口分配MAC地址,使其 ...

  6. React Native - 2 控件Flexbox

    *强烈建议使用Genymotion模拟器,比AVD速度快,功能强大.   1. flexDirection Flexbox是连续布局,它有主轴(primary axis)和交叉轴(cross axis ...

  7. python的垃圾回收机制和析构函数__del__

    析构函数__del__定义:在类里定义,如果不定义,Python 会在后台提供默认析构函数. 析构函数__del__调用: A.使用del 显式的调用析构函数删除对象时:del对象名: class F ...

  8. （3）webApi postman使用

    https://www.getpostman.com/

  9. UVALive 5097 Cross the Wall

    贪心思想,$dp$,斜率优化. 首先将人按照$w$从大到小排序,如果$w$一样,按$h$从大到小排.这样一来,某位置之后,比该位置$h$小的都是不需要考虑的. 因此,形成了如下图所示的结果: 即第一个 ...

  10. 洛谷——P1024 一元三次方程求解

    P1024 一元三次方程求解 题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-10 ...