我们所要学习的WXML模板语法有五种：

1.数据绑定 2.事件绑定与事件传参 3.条件渲染 4.列表渲染

1.数据绑定

数据绑定的基本原则：

1.在data中定义数据

2.在WXML中使用数据

定义数据和使用数据类似于VUE，如果学习过VUE再学习小程序就会比较容易

1.在data中定义数据

在data区域以key,value的形式就可以绑定数据了，用逗号分隔

Page({
    data: {
        // 定义的字符串数据类型
        wd:"ssa",
        // 定义的整数类型
        a:1
    },
})

2.在WXML中使用数据

使用js中定义的数据需要用到Mustache语法(双大括号)才能在WXML中使用，Mustache语法类似于VUE中的插值表达式

<view>{{ 需要插入的数据 }}</view>

3.动态绑定属性

与vue不同的是，WXML动态绑定属性的属性值也需要使用Mustache语法

页面数据：

Page({
    data: {
        img:"/images/1.png"
    },
})

页面结构：

<image src="{{img}}"></image>

4.三元运算

页面数据：

Page({
    data:{
        randomNum : Math.random()+10  //生成10以内的随机数
    }
})

页面结构：

<view>{{ randomNum >=5? "随机数字大于或等于5"："随机数字小于5" }}</view>

5.算数运算

页面数据：

Page({
    data:{
        randomNum : Math.random().toFixed(2) //生成一个带两位小数的随机数，例如0.24
    }
})

页面结构：

<view>生成100以内的随机数：{{randomNum * 100}}</view>

2.事件绑定与事件传参

1.什么是事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层的产生的行为，反馈到逻辑层进行业务的处理

2.小程序中常用的事件

 3.事件对象的属性列表

4.target和currentTarget的区别

target是触发该事件的源头组件，而currentRarget则是当前事件所绑定的组件

 点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

        e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件

        e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

5.在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

Page({
    data:{
        count:0
    },
    changeCount(){
        this.setData({
            count:this.data.count + 1
        })
    }
})

6.事件传参

可以为组件提供 data-* 自定义属性传参，其中*代表的是参数的名字，示例代码如下：

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

        info 会被解析为参数的名字

        数值2会被解析为参数的值

7.bindinput 语法格式

在小程序中，通过Input事件来响应文本框的输入事件，语法格式如下：

        通过bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler"></input>

        在页面的.js文件中定义事件处理函数：

inputHandler(e){
    console.log(e.detail.value)
}

3.条件渲染

1.wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{contidion}}">true</view>

还可以使用wx:elif和wx:else来添加else判断：

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===0}}">女</view>
<view wx:else>保密</view>

2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

<block>不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

3.hidden

在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏：

<view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示</view>

4.wx:if 与 hidden 的对比

1.运行方式不同

        wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

        hidden 以切换样式的方式,控制元素的显示与隐藏

2.使用建议

        频繁切换时，建议使用hidden

        控制条件复杂时，建议使用wx:if 搭配 wx:elif. wx:else 进行展示与隐藏的切换

4.列表渲染

1.wx:for

通过wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{array}}">
    索引是：{{index}} 当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

2.wx:key的使用

类似与Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

<view wx:for="{{userList}}" wx:key="index">{{item.name}}</view>

注意：wx:key中的属性不用加 Mustache语法(双大括号)