摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。
一个模块的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属性是没有值的
模块函数与事件绑定
在状态数据对象上定义的函数叫做模块函数，我们在子模块主动向父模块传值时提到过它。除了传值的作用外，模块函数还可当做事件绑定函数来使用，如下面事件绑定的示例，在上使用:on指令声明click事件并指定回调函数。
【注意】模块函数内的this指针指向当前模块的状态数据对象（即module.state对象），它也不可使用ES6的箭头函数（Arrow function），因为这样会导致函数内this指针指向不正确而出错。
计算属性
假如项目的某个模块中定义了两个状态属性，分别为产品品牌brand、产品型号model，此时你需要在模板中输出品牌与型号的组合，此时你可能会这样写：
{{ brand }} {{ model }}
这没有任何问题，但当有多处都需输出同样信息时，使用多个差值表达式就显得有点麻烦，所以对于如需要多次拼接字符串或其他任何较为复杂处理的输出，应该使用计算属性来实现，像这样：
{{ productName }}
表单的双向绑定
在表单元素上使用:model指令即可实现表单输入值与状态属性的双向绑定，如下：
可使用model指令的表单元素有type为任何值的input、textarea和select。
# :model指令在checkbox上使用
checkbox绑定的状态属性值必须为Array类型，且当多个checkbox绑定同一个状态属性时，被选中checkbox的值将会保存在此数组中。
# :model指令在radio上使用
radio元素没有设置name属性时，自动设置绑定的状态属性名为name属性。
以上所有指令为动态指令，接下来的是静态指令
设置当前页面显示的标题
当url跳转更新模块时，我们希望标题随模块改变，此时我们可使用:title指令来设置标题，它只能用于一个模块的
...
当然很多时候一个页面将同时加载多个不同层级的模块，此时框架将会从上到下、从外到内的顺序解析并更新模块，当以这样的顺序解析时将会获取第一个:title不为空的标题作为更新标题，而会自动忽略后面模块所定义的标题，所以建议标题应该在最外层的主模块中定义。
引用元素
有时候必须操作dom元素如聚焦input元素，我们必须获取此input元素的对象并调用input.focus函数，这时可以在此input元素上使用:ref指令定义一个引用，然后调用am.Module对象的成员函数refs( refName )获取被引用的dom元素：
当多个元素的:ref值设置同一个引用名时，使用refs函数获取该引用名的dom元素时将会返回一个包含所有该引用名的元素数组。
继续学习下一节：【AmapleJS教程】4. 组件
也可回顾上一节：【AmapleJS教程】2. 模块
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51745.html
相关文章
-
【Amaple教程】3. 模板指令与状态数据（state）
摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。
一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337);
如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template...
-
【Amaple教程】3. 模板指令与状态数据（state）
摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。
一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337);
如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template...
-
【Amaple教程】2. 模块
摘要：模块更新时部分不需被替换的模块，检测到或参数变化增加移除或修改参数时触发，如所有页面的部分总是不变，此时它将不会被替换。模块函数将在模板指令与状态数据中讲解继续学习下一节教程模板指令与状态数据也可回顾上一节教程启动路由
正如它的名字，模块用于amaplejs单页应用的页面分割，所有的跳转更新和代码编写都是以模块为单位的。
定义一个模块
一个模块由标签对包含，内部分为template模板...
发表评论
0条评论
阅读 3190·2021-11-19 09:40
阅读 2989·2021-09-09 09:32
阅读 770·2021-09-02 09:55
阅读 1373·2019-08-26 13:23
阅读 2383·2019-08-26 11:46
阅读 1214·2019-08-26 10:19
阅读 2035·2019-08-23 16:53
阅读 1050·2019-08-23 12:44
