微信小程序开发入门（九）

1、小程序数据绑定和事件绑定

<!--pages/index/index.wxml-->

<view class='box'>
  <view class='title'>数据绑定示例</view>
  <view>算术运算绑定：{{a}}+{{b}}+{{c}}={{a+b+c}}</view>
  <view>对象绑定-学号：{{Student.stuID}}</view>
  <view>对象绑定-姓名：{{Student.name}}</view>
  <view>对象绑定-生日：{{Student.birthday}}</view>
  <view>数组绑定-array[0]：{{array[0]}}</view>
  <view>数组绑定-array[1]：{{array[1]}}</view>
  <view>数组绑定-array[2]：{{array[2]}}</view>
  <button type='primary' bindtap='modify'>修改绑定数据</button>
</view>

/* pages/index/index.wxss */

view {
  font-size: 18px;
  margin: 10px;
}

// pages/index/index.js

Page({
  data: { //初始化数据
    a: 10, //初始化绑定的普通数据
    b: 20,
    c: 30,
    Student: { //初始化绑定的对象数据
      stuID: '20190213',
      name: '张三',
      birthday: '2001-9-1'
    },
    array: [ //初始化绑定的数组数据
      '2018', '2019', '2020'
    ]
  },
  modify: function () { //事件函数
    this.setData({ //修改绑定数据的值，this.setData直接调用了小程序中预定义的函数setData
      a: 100, //修改绑定的普通数据的值
      b: 200,
      c: 300,
      Student: { //修改绑定的对象数据的值
        stuID: '20190213',
        name: '李四',
        birthday: '2001-9-1'
      },
      array: [ //修改绑定的数组数据的值
        '2028', '2029', '2030'
      ]
    })
  }
})

页面初始渲染完成：

点击“修改绑定数据”按钮：

2、WXML　

　　是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

3、data对象

　　是页面第一次渲染时使用的初始数据，WXML中的动态数据均来自对应 Page的 data。页面加载时，data以JSON字符串的形式由逻辑层传至渲染层，数据类型包括：字符串，数字，布尔值，对象， 数组等。
4、数据绑定 

　　渲染层可以通过 WXML 对数据进行绑定。数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容、组件属性、控制属性、 关键字、运算、组合、数组、对象等场景。

5、setData() 函数 

　　用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。 

6、事件绑定 

　　事件是视图层到逻辑层的通讯方式，它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。