WXML(weixin markup language)是
框架设计的一套标签语言，结合基础组件，事件系统，
可以构建出页面的结构
一 数据绑定
数据绑定.png
wxml中的动态数据均来自对应的page中的data
1 简单绑定
数据绑定使用mustache语法（双大括号）将变量包起，可以作用于：
（1）内容
简单绑定.png
（2）组件属性（需要在双括号中）
组件属性.png
（3）控制属性（需要在双括号中）
控制属性.png
（4）关键字（需要在双引号之内）
2 运算
可以在{{}}中进行简单的运算，支持下面的几种方式：
（1）三元运算
三元运算.png
（2）算数运算
算术运算.png
（3）逻辑判断
逻辑运算.png
（4）字符串运算
字符串运算.png
（5）数据路径运算
数据路径运算.png
3 组合
可以在mustache内直接进行组合，构成新的对象或者数组
（1）数组
数组.png
（2）对象
对象.png
运算符（...）.png
组合的间接表达.png
变量名相同被覆盖.png
二 列表渲染
列表渲染.png
1 wx：for
在组件上使用wx：for控制属性绑定一个数组，
可以使用数组中的各项数据重复渲染该组件
默认数组的当前项的下标变量名是index，
数组当前项的变量名默认为item
列表渲染（1）.png
使用wx：for-item可以指定数组当前元素的变量名
使用wx： for-index可以指定数组当前下标的变量名
列表渲染2.png
wx：for也可以嵌套，
列表渲染3.png
2 block wx：for
类似block wx：if，
可以将wx：for用在<block/>标签上，
渲染一个包含多个节点的结构块
列表渲染4.png
3 wx： key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，
并且希望列表中的项目保持自己的特征和状态
（如 <input/> 中的输入内容，<switch/>的选中状态）
需要使用wx：key指定列表中项目的唯一标识符
wx：key的值有两种形式提供：
（1）字符串，代表在
for循环的array中item的某个property，
该property的值需要时列表中唯一的字符串或者数字，
不能动态改变
（2）保留关键字，*this代表在for循环中item本身，
表示需要item本身是一个唯一的字符串或者数字，
如：当数据改变触发渲染层重新渲染的时候，
会校正带有key的组件，框架会确保他们被重新排序，
而不是重新创建，确保使组件保持自身的状态
并且提高列表渲染时候的效率
注意：如果不提供wx：ley，会报warning
如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略
列表渲染5.png
列表渲染6.png
三 条件渲染
条件渲染.png
1 wx：if
在框架中，用wx：if=“{{condition}}”来判断是否需要渲染该代码块
条件渲染1.png
可以使用wx：elif 和 wx:else 添加一个else块
条件渲染2.png
2 block wx：if
wx：if是一个控制属性，需要将其添加到一个标签上，
如果想一次性判断多个组件标签，可以使用<block/>标签将多个组件包装起来，使用wx：if控制属性
条件渲染3.png
注意：<block/>不是一个组件，仅仅是一个包装元素，
不会在页面中做任何渲染，只接受控制属性
wx：if 和hidden的比较
因为wx：if之中的模板可能包含数据绑定，
当wx：if的条件值切换的时候，框架有一个局部渲染的过程，
它会确保条件块在切换时候销毁和重新渲染
同时，wx:if也是惰性的
如果初始渲染条件是false，框架什么也不做，
在条件第一次变成真，才开始局部渲染
hidden简单，组件始终会被渲染，只是简单的控制显示和隐藏
wx：if有更高的切换消耗
hidden有更高的初始渲染消耗，
如果需要频繁切换情景，用hidden
如果在运行时条件不大可能改变，wx：if较好
四 模板
模板.png
wxml提供模板，可以在模板中定义代码片段，然后在不同地方调用
1 定义模板
使用name属性，作为模板的名字，然后在
<template/>定义代码片段，
定义模板.png
2 使用模板
使用is属性，声明需要使用的模板，然后将模板所需的data传入
使用模板.png
is属性可以使用mustache语法，来动态决定具体需要渲染哪个模板
动态使用模板.png
3 模板的作用域
模板拥有自己的作用域，只能使用data传入数据
五 事件
事件.png
