轻松理解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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
RequireJS使用注意细节
May 15 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
详解原生js实现offset方法
Jun 15 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
TypeScript类型声明书写详解
Aug 28 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
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php网站地图生成类示例
2014/01/13 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python单元测试实例详解
2018/05/25 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
求职个人评价范文
2014/04/09 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
股东授权委托书
2014/10/15 职场文书
稽核岗位职责范本
2015/04/13 职场文书
学校团代会开幕词
2016/03/04 职场文书