微信小程序学习（四）：模板语法、数据绑定、数据监听

1、声明和绑定数据

• 小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义
• 在将数据声明好以后，需要在 WXML 中绑定数据，数据绑定最简单的方式是使用 Mustache 语法（双大括号）将变量包起来。
• 在 {{ }} 内部可以做一些简单的运算，支持如下几种方式：
  • 算数运算
  • 三元运算
  • 逻辑判断
  • 其他…

Page({
  // 在小程序页面中所需要使用的数据均来自于 data 对象
  data: {
    id: 1,
    isChecked: false,
    school: 'xxx',
    obj: {
      name: 'tom'
    }
  }
})

<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view>

<!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>

<!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" />

<!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>

<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>

<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>

<!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>

2、修改数据

• 小程序中修改数据并不能直接进行赋值，而是要通过调用 this.setData 方法才能实现
• 将需要修改的数据以 key:value 的形式传给 this.setData 方法。
• this.setData 方法有两个作用：
  • 更新数据
  • 驱动视图更新

Page({
  // 页面的初始数据
  data: {
    num: 1,
    userInfo: {
      name: 'Tom',
      age: 10,
      gender: '男'
    },
    animalList: ['Tom', 'Jerry', 'Spyke']
  },
  updateData() {
    this.setData({
      // key 是需要修改的数据
      // value 是最新值
      num: this.data.num + 1,
      userInfo: {}  // 用一个新对象替换原对象，数组同理
    })
    
	// 修改对象中的多个属性
	this.setData({
	  'userInfo.name': 'Jerry',
	  'userInfo.age': 100
	})
	
	// 修改数组中的属性
	this.setData({
	  'animalList[2]': 'Tyke' 
	})
  }
}

3、数据绑定-简易双向绑定

在 WXML 中，普通属性的绑定是单向的，例如：

<input value="{{ num }}" />

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。
但如果用户修改了输入框里的值，却不会同时改变 data 中的 num 。

如果需要在用户输入的同时也将 data 中的数据修改 ，需要借助简易双向绑定机制。
此时可以在对应项目之前加入 model: 前缀即可，例如：

<input model:value="{{ value }}" />

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。

如果输入框的值被改变了， data 的数据也会随着改变。

4、数据监听

数据监听器可以用于监听和响应任何属性和数据字段的变化，有时，需要在一些数据字段被 setData 设置时，需要执行一些操作。那么就可以使用 observers 数据监听器来实现。语法如下：

Component({
  data: {
    num: 10,
    count: 1,
    obj: { name: 'Tom', age: 10 },
    arr: [1, 2, 3]
  },
  observers: {
    // key 是需要检测数据
    // value 是一个函数，函数接收一个形参作为参数，是最新的值
    num: function(newNum) {
      console.log(newNum)
    },
    
    // 数据监听器支持监听属性或内部数据的变化，可以同时监听多个
    'num, count': function (newNum, newCount) {
       console.log(newNum, newCount)
    }
    
    // 监听器可以监听子数据字段
    'obj.age': function(newAge) {
      console.log(newAge)
    },
    
    // 如果需要监听所有子数据字段的变化，可以使用通配符 ** 
    'obj.**': function(newAge) {
      console.log(newAge)
    },
        
    'arr[0]': function (val) {}
  }
})