WXML模板语法数据绑定

• 数据绑定的基本原则
  （1）在data中定义数据

（2）在WXML中使用数据

• 在data中定义页面的数据
  在data中定义数据方式如下

Page({
data:{
info:'init data'
}
})

• 使用Mustache语法渲染数据
  语法格式：<view>{{要绑定的数据}}</view>

Mustache语法绑定数据场景

Mustache语法主要应用场景如下：
（1）绑定内容
（2）绑定属性
（3）运算（三元运算、算术运算）

• 动态绑定内容
  页面数据如下：

Page({
data:{
info:'init data'
}
})

页面结构如下：

<view>{{info}}</view>

• 动态绑定属性
  页面数据结构如下：

Page({
data:{
imgSrc:'http://wwww.baidu.com/test.png'
}
})

页面的结构如下

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

• 三元运算
  页面数据结构如下：

Page({
data:{
randomNum:Math.random()*10
}
})

页面的结构如下：

<view>{{randomNumber>=5?'随机数字大于或等于5':'随机数字小于5'}}</view>

• 算术运算
  页面的数据结构如下：

Page({
data:{
randomNum:Math.random().toFixed(2)
}
})

页面的结构如下：

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

模板语法事件绑定

• 什么是事件
  渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。
• 小程序中常用的事件

• 事件对象属性列表
  当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下：

• target和currentTargent的区别
  target是触发事件的源头组件，而currentTarget则是当前事件所绑定的组件。例如：

<view bindtap="handleevent">
<button type="primary">按钮</button>
</view>

target为button组件，currentTarget为view组件

• bindtap的语法格式
  （1）通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bindtap="bindTapHandler">按钮</button>

（2）在页面的.js文件中定义对应事件处理函数，事件参数通过event来接收：

Page({
btnTapHandler(e){
console.log(e)
}
})

• 在事件处理函数中为data中的数据赋值
  通过调用this.setData(dataObject)方法，可以给页面data中的数据赋值，示例如下：

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

• 事件传参
  小程序事件传参不同于vue，方式：为组件提供data-自定义属性传参，其中代表的是参数的名字，示例：

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

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：

btnHandler(e){
//dataset是一个对象，包含了所有通过data-*传递过来的参数项
console.log(e.target.dataset) 
//通过 dataset可以访问到具体参数的值
console.log(e.target.dataset.info)
}

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

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

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

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

inputHandler(e){
//e.detail.value 是变化过后，文本框最新的值
console.log(e.detail.value)
}

• 实现文本框和data之间数据同步
  实现步骤：定义数据---渲染结构---美化样式---绑定input事件处理函数

（1）定义数据：

Page({
data:{
msg:'你好'
}
})

（2）渲染结构：

<input value="{{msg}}" bindinput="iptHandler"></input>

(3)美化样式：

input{
border:1px solid #eeel;
padding:5px;
margin:5px;
border-radius:3px;
}

（4）绑定input事件处理函数

iptHandler(e){
this.setData({
//通过e.detail.value 获取到文本框最新的值
msg:e.detail.value
})
}

条件渲染-wx:if

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

<view wx:if="{{condition}}">True</view>

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

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

• 结合<block>使用wx:if
  一次性控制多个组件的展示与隐藏，使用<block></block>将多个组件包装起来：

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

注：<block>并不是一个组件，不会在页面中做任何渲染。

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

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

• wx:if与hidden的对比
  （1）运行方式不同：同vue的v-if和v-show

（2）使用建议：频繁切换时，建议使用hidden,控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染-wx:for

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

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

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

• 手动指定索引和当前项的变量名*
  （1）使用wx:for-index可以指定当前循环项的索引的变量名

（2）使用wx:for-item可以指定当前项的变量名
示例代码如下：

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

• wx:key的使用
  通过绑定key可以提高渲染效率,示例代码如下：

data:{
userList:[
{id:1,name:'hong'},
{id:2,name:'bai},
{id:3,name:'huang'}
]
}
//wxml
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>