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

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

>>>数据视图绑定

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

以下数据和对象等同。

传统的视图和数据绑定

Page({

 data: {

  message: &＃39;Hello MINA!&＃39;

 }

})

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

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

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

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

 
  
 
  数据请求
 

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

总结：

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

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

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

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