1.WXML语法参考

1.1数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定，js文件里的data属性,在wxml中直接使用{{ }}进行绑定。与vue的写法十分相似。
特别注意：bool类型不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。
注意：花括号和引号之间如果有空格，将最终被解析成为字符串
在这里插入图片描述

1.2运算

{{}}数据绑定可以是简单的运算表达式，包括数字的加减，字符串拼接，三元表达式。
在这里插入图片描述

1.3列表渲染

wx:for （与vue的v-for类似）
在组件上使用 wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

使用 wx:for-item可以指定数组当前元素的变量名，
使用 wx:for-index可以指定数组当前下标的变量名：

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this
代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
在这里插入图片描述

在这里插入图片描述

1.4 block标签占位

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素,只是占位符的一个标签，不代表实际含义。
在这里插入图片描述

1.5条件渲染

类似vue的v-if,v-else-if,v-else。
wx:if在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

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

也可以用 wx:elif 和 wx:else来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为 wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 block标签将多个组件包装起来，并在上边使用 wx:if控制属性。

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

注意：
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden 控制显示

频繁切换用hidden，不常使用时用wx:if
wx:if是直接把标签从结构中移除，而hidden是通过display:none；样式来控制显示。

在这里插入图片描述

1.6模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

在这里插入图片描述

使用模板

在这里插入图片描述

引用

WXML 提供两种文件引用方式import和include。

在这里插入图片描述

示例
注意引用路径,data传值时是单引号

在这里插入图片描述

2.事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如bindtap,bindinput,bindchange等
不同的组件⽀持不同的事件，具体看组件的说明即可。
js中赋值使用setData({ }),与vue的用法不同。事件传值要用标签自定义属性 data-xxx=""
获取输入框的值为e.detail.value
获取传入的值为e.currentTarget.dataset
handleInput:function(e)里的e为事件源，是一个对象，通常会console.log(e)来查看我们所需要的值的具体位置。

在这里插入图片描述

绑定点击事件，使用的是bindtap