轻松理解vue的双向数据绑定问题


Posted in Javascript onOctober 30, 2017

Vue介绍

Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。

Vue与MVVM

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步。

双向绑定

主流双向数据绑定实现原理

脏值检测 : 这是AngularJS实现双向数据绑定的方式。 原理是 当数据进行变更的时候对所有Model和View的绑定关系进行一次检查,识别是否有数据进行了变更,如果有变化则进行处理,由于可能进一步引发其他数据的改变,会再次循环这个过程,知道没有数据的变化之后。发送数据到视图重新渲染。 可想而知,这样的方式性能不高。

单向数据绑定

指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成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("userNmae").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的双向数据绑定的核心点。

总结

以上所述是小编给大家介绍的轻松理解vue的数据双向绑定问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
Javascript节点关系实例分析
May 15 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 #Javascript
ES6 javascript的异步操作实例详解
Oct 30 #Javascript
React Native 搭建开发环境的方法步骤
Oct 30 #Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 #Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 #Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JS解析XML的实现代码
2009/11/12 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用struct处理二进制的实例详解
2017/09/11 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python字典遍历操作实例小结
2019/03/05 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python定义一个函数的方法
2020/06/15 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
六十大寿答谢词
2014/01/12 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
给老师的一封建议书
2014/03/13 职场文书
毕业生就业意向书
2014/04/01 职场文书
计生专干事迹
2014/05/28 职场文书
坎儿井导游词
2015/02/09 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL