小程序开发为什么要进行数据绑定

小程序开发框架基本定型为逻辑层和视图层，有点类似于APP或网页的前台与后台，这是一种常见的视图和逻辑分离的程序设计方式，开发出来的程序更加灵活，易扩展。但是采用这种设计方法需要解决两个问题：视图层响应逻辑层逻辑和数据的变化以及视图层将用户的操作反馈到逻辑层。通常来说可以让视图层和逻辑层互相暴露接口给对方，不过出于对灵活性和扩展性的考虑，会引入中间层来进行管理，这样可以避免视图层和逻辑层之间的直接依赖。为了更好的帮助开发者开发微信小程序，微信定义了一些语法和规则来帮助开发者连接视图层和逻辑层。这也是小程序开发为什么要进行数据绑定。

数据绑定

显示字符串内容

//page.wxml

{{motto}}

//page.js

data: {

motto: \'Hello World\',

},

通过将”{{motto}}”嵌入视图层代码中，界面会显示”HelloWorld”

更改字符串内容

setData({

motto:\'Hello My World\'

})

当执行上述代码后，界面会显示”Hello My World”

上述部分有两点需要说明:

1: 视图层嵌入的是{{motto}}而不是{{data.motto}}，微信框架默认设定视图层绑定的变量定义在Page对象的data属性中，也就是说，如果变量需要绑定到视图层，一定要定义data属性中

2: 通过调用Page对象的setData(Page对象预定义)方法，可以更新界面数据，但是直接设置变量是无效的，因此对于绑定到视图层的变量，要永远使用setData方法来设置变量值

显示图片 

在开发工具默认生成的程序首页，显示了用户的头像，相关代码如下:

//index.wxml

//index.js

onLoad: function () {

console.log(\'onLoad\')

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo){

//更新数据

that.setData({

userInfo:userInfo

})

})

}

image标签的src属性绑定了userInfo.avatarUrl变量，并在onLoad方法中通过调用setData方法设置userInfo。

属性绑定

可以将变量绑定到视图组件的属性值上(如上面image标签的src属性)，注意在绑定到属性时，需要在外面加入一对双引号。

src={{userInfo.avatarUrl}}

除了用于显示图片外，属性绑定还有许多作用。例如关联数据。假设要做一个学生管理程序，页面使用列表来展示用户数据，当用户点击某一学生信息时，进入该学生的详情页页面。

当获取到用户的点击事件时，必须要知道点击的是哪一个学生的数据，这时可以将学生的id绑定到视图组件的id属性中来进行数据关联。可以将变量绑定到视图组件的hidden属性中，通过更改组件hidden属性的值，可以控制组件是否显示。

控制属性 

上面说到可以通过属性绑定的方法来控制视图组件是否显示，还可以通过控制属性来实现这一功能。同样，控制属性绑定时也需要添加双引号。

绑定数据可以很好的为开发者链接逻辑和视图层，除了数据绑定还有其他语法和规律，主要在前后台之间充当一个媒介的作用。

推荐阅读：微信小程序开发工具怎么使用