初始化数据:
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 语法参考--->数据绑定