1.声明和绑定数据
1.小程序页面中使用的数据均需要在 Page()方法的 data 对象中进行声明定义
2.在将数据声明好以后，在 WXML 使用 Mustache 语法(双大括号{{}})将变量包起来，从而将数据绑定
3.在{{}} 内部可以做一些简单的运算，支持如下几种方式:
1.算数运算
2 三元运算
3.逻辑判断
4.其他...
注意事项:在{{}}语法中，只能写表达式，不能写语句，也不能调用js 相关的方法
4.例如：
1.<!--绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>
2.<!--如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ ischecked }}" />
3.<!--算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id -1 }}</view>
4.<!--三元运算 -->
<view>{{ id ===1?'等于’:'不等于’}}</view>
5.<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>
2.setData() 修改数据
1.程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据
2.而是要通过调用 setData(方法进行修改，setData()方法接收对象作为参数，key 是需要修改的数据，value 是最新的值
3.setData()方法有两个作用:
1.更新数据
2.驱动视图更新
3.setData()-修改对象类型数据
1.新增 单个/多个属性
this.setData({
// 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c11
'userInfo.name': 'tom',
'userInfo.age': 10
})
2.修改 单个/多个属性
this.setData({
//如果需要修改对象属性，也可以将·key 写成数据路径的方式 a.b.c
'userInfo.name':'jerry',
'userInfo.age': 18
})
//目前进行新增和修改都是使用数据路径，如果新增和修改的数据量比较小，还可以
//如果修改的数据很多，每次都写数据路径，就太麻烦了
// 可以使用 ES6 提供的展开运算符 和 object.assign()
1.ES6 提供的展开运算符
//通过展开运算符能够将对象中的属性复制给另一个对象
//后面的属性会覆盖前面的属性
const userInfo = {
...this.data.userInfo,
name: 'jerry',
age: 18
}
this.setData({
userInfo
)}
2.0bject.assign()将多个对象合并为一个对象
const userInfo = 0bject.assign(this.data.userInfo, { name: 'jerry'}, { age: 18 })
this.setData({
userInfo
})
3.删除 单个/多个 属性
//删除单个属性
delete this.data.userInfo.age
this.setData({
userInfo:this.data.userInfo
})
//删除多个属性 rest 剩余参数
const { age,test, ...rest } = this.data.userInfo
this.setData({
userInfo: rest
})
4.数组
1.//新增数组元素
// 如果直接使用 push 方法，可以直接更新 data ，但是不能更新 页面中的数据
// this.data.list.push(4)
1.this.data.list.push(4)
this.setData({
list: this.data.list
})
2.const newList = this.data.list.concat(4)
this.setData({
list: newlist
})
3.const newlist = [...this.data.list, 4 ]
this.setData({
list: newList
})
2.//修改数组元素
this.setData({
'list[1]':6
list[e].name': 'jerry'
})
3.//删除数组元素
1.this.data.list.splice(1,1)
this.setData({
list: this.data.list
})
2.const newlist = this.data.list.filter(item => item !== 2)
this.setData({
list: newList
})
4.简易双向数据绑定
1.在WXML中，普通属性的绑定是单向的，例如:<input value="{{value}}"/>
2.如果希望用户输入数据的同时改变 data 中的数据，可以借助简易双向绑定机制。在对应属性之前添加 mode: 前缀即可
3.例如<input model:value="{{value}}" />
4.注意事项:简易双向绑定的属性值如下限制:
1. 只能是一个单一字段的绑定，例如:错误用法:<input model:value="值为{{value}}"/>
2.尚不能写 data 路径，也就是不支持数组和对象，例如:错误用法:<input model:value="{{a.b}}" />
5.列表渲染-基本使用
1.列表渲染 就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上
2.在组件上使用 wx:for 属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件
3.每一项的变量名默认为 item，下标变量名默认为 index
4.在使用 wx:for 进行遍历的时候，建议加上 wx:key 属性， wx:key 的值以两种形式提供
1.字符串:代表需要遍历的 array 中 item 的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变
2.保留关键字 *this 代表在 for 循环中的 item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用
5.注意事项:
1.如果不加 wx:key，会报一个 warming，如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。
2.在给 wx:key 添加属性值的时候，不需要使用双大括号语法，直接使用遍历的 array 中 item 的某个属性
6. 列表渲染-进阶用法
1.如果需要对默认的变量名和下标进行修改，可以使用wx:for-item 和 wx:for-index
1.如果需要修改默认的变量名，需要使用 wx:for-item 属性
2.如果需要修改默认的下标变量名，需要使用 wx:for-index 属性
3.两个属性需要和 wx:for 写到同一个组件上
4.再重命名、修改以后，需要使用最新的变量名
2.将 wx:for 用在<block />标签上，以渲染一个包含多个节点的结构块
1.<block >并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
2.<block />标签在 wxml 中可以用于组织代码结构，支持列表渲染、条件渲染等
7.条件渲染
1.条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式:
1.使用 wx:if、wx:elif、wx:else 属性组
2.使用 hidden 属性
2.wx:if和 hidden 二者的区别:
1.wx:if:当条件为 true 时将结构展示出来，否则结构不会进行展示，通过 移除|新增节点 的方式来实现
1.wx:elif wx:else 不能单独使用，在使用的时候，必须结合 wx:if 来使用
2.使用了 wx:if 属性组的组件不能被打断，组件必须连贯才可以
2. hidden:当条件为 true 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性 来实现的
hidden 属性 属性值 如果是 true，就会隐藏结构，如果是 false，才会展示结构
3.wx:if 控制结构的展示和隐藏，是通过新增和移除结构来实现的
hidden 属性控制结构的展示和隐藏，是通过 css 的 display 属性来实现
