2.微信小程序开发（数据绑定和事件绑定）

 数据绑定

// index.js
Page({

  // 数据绑定
  data: {
    // 1.动态绑定数据
    myInfo: "你好明天", // wxml页面引入{{myInfo}}

    // 2.动态绑定属性
    imgSrc: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iNehTdlWaZr9yDuPgJpIoAHaDe?w=308&h=164&c=7&r=0&o=5&pid=1.7', // wxml页面引入src="{{imgSrc}}"

    // 3.三元运算
    randomNum: Math.random() * 10, //生成10以内的随机数
    // wxml页面引入{{ randomNum>5?"随机数"+randomNum+"大于五":"随机数小于或等于5"}}

    count: 0,
    msg: "hello World"

  },

})

<view class="container">
    {{myInfo}}
    <image src="{{imgSrc}}"></image>

    <view>
      {{ randomNum>5?"随机数"+randomNum+"大于五":"随机数小于或等于5"}}
    </view>
</view>

事件绑定

    <!-- 事件绑定
    1.bindtap 点击事件
    2.bindinput 文本框的输入事件,文本框内容改变就触发事件
    3.bindchange 状态改变时触发 -->
    <button  bindtap="justLikeClickEvent">点击事件</button>

    <!-- {{count}} 接收来自js的数据 -->
    <button bindtap = "countPlus">{{count}}</button>

    <!-- 通过标签属性 data-info="{{2}}" 传参给js  -->
    <button bindtap = "dataInfo" data-info="{{2}}" >{{count}}</button>
    
    <input type="text" bindinput="inputHandler" value="{{msg}}"/>
    <view>
      {{msg}}
    </view>

事件处理程序

// index.js
Page({

  // 事件处理程序
  justLikeClickEvent(e) {
    console.log(e) //事件参数对象
  },

  countPlus() {
    //事件传参，修改数据
    this.setData({
      count: this.data.count + 1
    })
  },

  dataInfo(e) {
    console.log(e)
    this.setData({
      //将wxml传入的事件参数对象属性值 赋值累加给数据count
      count: this.data.count + e.target.dataset.info
    })
  },

  inputHandler(e) {
    console.log(e.detail.value)
    this.setData({
      //可以将所有引用此数据msg的值全部动态改变
      msg: e.detail.value // value="{{msg}}"
    })
  },

})