大数据综合程序设计（三）

数据与事件的绑定

初始数据在index.js中，在appdata中初始化测试数据，小程序中的动态数据都在index.js中的data里面去设置。如下：

data: {

    msg:'刘佳琳 2022013997'

  },

在小程序中页面使用的初始数据都会问data要。

在index.wsml中将text那一行代码改成

  <text class="userName">{{msg}}</text>

回到index.js，编辑生命周期函数--监听页面加载代码为

onLoad:function (options) {

    console.log('onLoad()');

    //修改msg的状态数据,语法：this.setData

    console.log(this.data.msg)//this代表当前页面实例对象

//编译后预览界面会修改页面信息

    setTimeout(()=>{

      this.setData({

        msg:'xiugaihou '

      })

      console.log(this.data.msg)

    },2000)

  },

//2000 ：延迟两秒修改

  1.单项：Model-->View

将index.wxml中编译为

<view class="indexContainer">

  <image class="avatarUrl" src="/stuck/images/f.png"></image>

  <text class="userName">{{msg}}</text>

  <view class="goStudy" bindtap="handleParent">

   <text bindtap='handleChild'>hello world</text>

  </view>

</view>

index.js中在data和生命周期函数之间插入代码：

handleParent(){

    console.log('parent')

  },

  handleChild(){

    console.log('child')

  },

进行编译后，出现中间名字的改变（将index.wxml中的bindtap改为catchtap再运行）

结果如下：

         两秒后变为：                                                                                  

总结

1.小程序
 1.data中初始化数据
 2.修改数据：this.setData0
        1. 修改数据的行为始终是同步的
 3数据流：
        1.单项：Model---> View
2.Vue
 1.data中初始化数据
 2.修改数据：this.key= value
 3.数据流：
        1.Vue是单项数据流：Model--> Vew
        2. Vue中实现了双向数据绑定：v-model

3.React
 1. state中的始化状态数据
 2.修改数据：this.setState（）     
  1.自身构子函数中(componercDidMount)异步的
  2. 非自身的钩子函数中(定时器的回调)同步的
  3.数据流