首页 > PHP资讯 > 工具库 > 微信小程序数据绑定详解及实例(图文详解)

微信小程序数据绑定详解及实例(图文详解)

工具库
这篇文章主要介绍了微信小程序数据绑定详解及实例(图文详解)的相关资料,需要的朋友可以参考下

微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定。

>>>数据视图绑定

做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性。

以下数据和对象等同。

传统的视图和数据绑定

Page({ data: {  message: 'Hello MINA!' }})


就这么简单完成视图跟数据的绑定。

仅仅通过数据更新视图是不够的,用户操作引起视图更新,数据怎么同步呢?

这里要区分的是,用户触发事件不仅要考虑当前UI元素更新,还会通过当前元素更新其他视图。

所以视图上的数据都必须用过事件传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态。
如下图:

       



Page({  data:{   disabled: false,   loadingHidden: true  },  //按钮事件  loginBtn: function(event){   //禁用按钮   this.setData({disabled: true});   //弹出正在登录框   this.setData({loadingHidden: false});  } })  


总结:

现在流行数据单双向绑定,小程序使用了单向数据流,如果采用传统的jQuery方式操作数据和视图,开发效率低,开发者不买账。如果采用双向数据流,程序执行效率偏低,而且是逻辑层对象状态不可控。

总体来说,小程序数据视图单向绑定开发模式,让开发者专注于事件处理上,改变对象状态,实现视图更新。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

以上就是微信小程序数据绑定详解及实例(图文详解)的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持1不支持0