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

地址：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html