2.小程序-数据绑定
初始化数据：
1.页面.js的 data 选项中
index.js 文件中代码展示：
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
message:'初始化测试数据'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onLoad()');
// 页面加载最先执行的函数，类似vue中的created/mounted获取数据
// 这里来修改一下 message 初始化的数据，语法：this.setData
console.log(this) // this 代表当前页面的实例对象
// vue/react 里的 this代表当前组件的实例对象
// vue 如何实现数据的劫持和代理的,即可以this.XXX 而小程序则使用 this.data.XXX
console.log(this.data.message)
// 同一个函数中修改是同步的，react里同一函数内修改是异步的要想同步需要在另一个函数中写；
// this.setData({
// message : '修改之后的数据'
// })
// 看修改是否在其他函数中是否也是同步的
setTimeout(()=>{
this.setData({
message : '修改之后的数据'
})
console.log(this.data.message)
}, 2000)
},
使用数据：
1.模板结构中使用双大括号 {{message}}
2.注意事项：小程序中为单项数据流 model ---> view;
index.wxml 文件中代码展示：
<view class="indexContainer">
<image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
<text class="userName">G『 s 』</text>
<view class="goStudy">
<text>{{message}}</text>
</view>
</view>
修改数据：
1.this.setData({message:""}, callback)
2.this 打印出来是一个 对象；
数据绑定和修改对比：小程序 Vue React
1.小程序
1.data中初始化数据
2.修改数据：this.setData()
1.修改数据的行为始终是同步的
3.数据流：
1.单向的：Model ---> View
2.Vue
1.data中初始化数据
2.修改数据：this.key = value
3.数据流：
1.Vue是单向数据流：Model ----> View
2.Vue中实现了双向数据绑定：v-model
3.React
1.state中初始化数据
2.修改数据：this.setState()
1.自身钩子函数中（componentDidMount）异步的
2.非自身的钩子函数中(定时器的回调) 同步的
3.数据流：
1.单向：Model ---> View
官网的位置：框架---> WXML 语法参考--->数据绑定
