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. 【LYOI2016】EasyRound1

    这可能是给新高一写的吧……随手写着玩玩…… A:随便模拟 #include<cstdio> #include<cstring> using namespace std; int ...

  2. 6.flume实战（三）※

    需求:将A服务器上的日志实时采集到B服务器上面去 大致原理: 技术选型: exec source + memory channel + avro sink avro source + memory c ...

  3. 转载：document.execCommand()的用法小记

    首先要说明的是在firefox下支持不好.2D-Position 允许通过拖曳移动绝对定位的对象. AbsolutePosition 设定元素的 position 属性为“absolute”(绝对). ...

  4. Selenium2+python自动化57-捕获异常（NoSuchElementException）【转载】

    前言 在定位元素的时候,经常会遇到各种异常,为什么会发生这些异常,遇到异常又该如何处理呢? 本篇通过学习selenium的exceptions模块,了解异常发生的原因. 一.发生异常 1.打开博客首页 ...

  5. js的变量的有效域

    function test(o) { var i=0; if(typeof o=="object") { var j=1; for(var k=0;k<10;k++) { c ...

  6. w3cschool javascript学习

    name与Id属性区别 1.我们知道在网页做Post提交时,是以Form(即表单域)为单位进行提交的,一个Form里有若干个表单对象(如<input type="text" ...

  7. 显示(explicit )与隐式(implicit)转换操作符

    class Program { static void Main(string[] args) { /* * 不管是显示还是隐式转换,一种类型都只能出现一次 */ Console.WriteLine( ...

  8. intellij idea android错误： Missing styles. Is the correct theme chosen for this layout?

    Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layou ...

  9. POJ 2348 Euclid's Game（博弈论）

    [题目链接] http://poj.org/problem?id=2348 [题目大意] 给出两个数,两个参赛者轮流用一个数减去另一个数的倍数,当一个数为0的时候游戏获胜, 求先手是否必胜 [题解] ...

  10. 【博弈论】【SG函数】bzoj1777 [Usaco2010 Hol]rocks 石头木头

    仅有距根节点为奇数距离的节点的石子被移走对答案有贡献,∵即使偶数的石子被移走,迟早会被再移到奇数,而奇数被移走后,不一定能够在移到偶数(到根了). 最多移L个:石子数模(L+1),比较显然,也可以自己 ...