摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。
一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：
如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template模板也是基于模板指令和状态数据的动态模板引擎，当一个状态数据改变时，在template模板中与它绑定的dom元素将自动作出相应的更新，所以此时你只需关心模块内的状态数据，而不需去理会视图层的更新。
指令类型指令分为动态指令和静态指令，动态指令的值会被当作JavaScript代码被解析，所以它们可以获取并绑定状态属性的值，如:if、:for等指令；而静态属性的值只会被当做普通的字符串处理，无法绑定状态属性，如:module和:ref指令。
使用插值表达式输出文本我们直接先看看在index.html模板中使用插值表达式输出文本和属性，你应该会很快明白是怎么回事了：
{{ text }} direct to page about
【注意】①. 模板中的取值范围为当前模块的状态数据对象，在上面示例中，解析挂载时{{ text }}被替换为状态数据的text属性值；
②. 插值表达式的{{}}将被作为JavaScript代码解析，如你可以这样写{{ text === 1 ? "show" : "hidden" }}，表示text属性值等于数字1时输出"show"，否则输出"hidden"。
# 插值表达式在style与class属性的特殊表现
插值表达式一般输出字符串（状态属性值不为字符串时将会调用该值的toString函数），但在style属性上使用插值表达式时会将一个object对象转换为内联样式的格式，在class属性上使用时会将一个array数组转换为以空格隔开的字符串：
循环渲染输出dom元素
在实际项目中，经常会遇到根据数据库的数据来渲染一个列表的需求，如用户列表、使用表格展示数据等，此时我们就需要使用模板指令:for来完成需求：
- {{ item }}
# 在上使用:for
你可以在上使用:for来循环渲染多个dom元素：
list.firstName
list.lastName
它将被渲染为：
George
Bush
Jake
Wood
# 使用:for指令遍历字符串
当:for指令遍历字符串时，item值为字符串每个字符：
Amaple由
[{{ char }}]
组成
# 使用:for指令遍历数字
当:for指令遍历数字时，item值为从0开始累加的索引数字：
小于5的非负数有
[{{ num }}]
【注意】使用状态数组应该避免直接通过索引操作，如this.state.list [ 0 ] = "banana"将不会触发自动更新。
通过条件判断显示与隐藏元素
我们经常需要通过条件判断来确定应该显示哪一部分的内容，以简单的用户登录为例，当有用户信息时显示信息，没有时显示登录按钮，此时可以使用模板指令的:if、:else-if、:else，它与我们熟知的if、else if及else关键字的用法相同：
{{ userInfo.username }}
当初始化时module.state.userInfo=null，它将被渲染为：
当mounted钩子函数触发后module.state.userInfo={ username: "Tom", avatar: "tom_101101.jpg" }，它将被渲染为：
Tom
# 在上使用条件判断
它将的子元素作为一个整体进行条件判断，并在渲染的时候去掉父元素。
content1
content2
content3
content4
content5
当module.state.show=true时将被渲染为：
content1
content2
当module.state.show=false时将被渲染为：
content3
content4
当module.state.show=1时将被渲染为：
content5
# :for和:if在同一个元素上使用
:for指令的解析优先级高于:if，这意味着所有循环渲染的元素都会判断:if的条件。
- {{ item }}
它将被渲染为：
- orange
- grape
【注意】带有:else-if或:else属性元素的上一个兄弟元素必须使用了:if或:else-if指令，且:else属性是没有值的模块函数与事件绑定
在状态数据对象上定义的函数叫做模块函数，我们在子模块主动向父模块传值时提到过它。除了传值的作用外，模块函数还可当做事件绑定函数来使用，如下面事件绑定的示例，在
<