扣丁学堂HTML5培训简述什么是双向数据绑定及MVVM
2019-04-08 14:37:15
1873浏览
本篇文章扣丁学堂HTML5培训小编给读者们分享一下什么是双向数据绑定及MVVM，感兴趣的小伙伴就随小编来了解一下吧。
双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。换句话说，如果有一个拥有name属性的user对象，与元素的内容绑定，当给user.name赋予一个新值，页面元素节点也会相应的显示新的数据。同样的，如果页面元素(通常是input）上的数据改变，输入一个新的值会导致user对象中的name属性发生变化。
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
总之一句话,数据与表现分离，当某一个数据改变时，页面上所有使用这个数据的元素的内容都会改变。下面是一个最简单的数据绑定的例子，来自Vue2.0源码阅读笔记–双向绑定实现原理，这个例子十分简单粗暴，就做了三件事：
创建 obj 对象，用来保存数据
监听 keyup 事件，当事件触发时，把选定的 input 标签的值赋给 obj 对象的 hello 属性。
改变 obj 对象 的 hello 属性的 set 方法，当 hell 被赋值时，将这个值同时赋值给选中的两个元素。
<!DOCTYPE html>
<head></head>
<body>
<div id="app">
<input type="text" id="a">
<span id="b"></span>
</div>
<script type="text/javascript">
var obj = {};
Object.defineProperty(obj, 'hello', {
get: function() {
console.log('get val:'+ val);
return val;
},
set: function(newVal) {
val = newVal;
console.log('set val:'+ val);
document.getElementById('a').value = val;
document.getElementById('b').innerHTML = val;
}
});
document.addEventListener('keyup', function(e) {
obj.hello = e.target.value;
});
</script>
</body>
</html>
想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。
【扫码进入HTML5前端开发VIP免费公开课】 【扫码进入前端H5架构师进阶VIP体验课】
查看更多关于“HTML5开发技术资讯”的相关文章>>
标签:
HTML5培训
HTML5视频教程
HTML5学习视频
HTML5在线视频
HTML5培训班
前端H5架构师进阶
HTML5公开课
15311698296
