template 模板
更新时间：
类似 HTML 的标签语言，结合基础组件、自定义组件、事件，构建出页面的结构
注意：模板中只能有 1 个根节点，如：div；请不要在<template>下存在多个根节点
数据绑定
<template>
<text>{{message}}</text>
</template>
<script>
export default {
// 页面级组件的数据模型
data: {
message: 'Hello',
},
}
</script>事件绑定
<template>
<div>
<!-- 正常格式 -->
<text onclick="press"></text>
<!-- 缩写 -->
<text @click="press"></text>
</div>
</template>
<script>
export default {
data: {
title: '',
},
press(e) {
this.title = 'Hello'
},
}
</script>事件回调支持的写法（其中{{}}可以省略）：
"fn"：fn 为事件回调函数名（在<script>中有对应的函数实现）
"fn(a,b)"：函数参数例如 a，b 可以是常量，或者是在<script>中定义的页面的数据变量(前面不用写 this)
"a+b"：表达式，其中 a,b 数据类型与上面相同
回调函数被调用时，会在参数列表末尾自动添加一个 evt 参数，通过 evt 参数访问回调事件相关上下文数据（数据内容具体参看组件回调事件说明），例如点击事件的点击位置 x , y
列表渲染
<template>
<div>
<div for="{{list}}" tid="uniqueId">
<text>{{$idx}}</text>
<text>{{$item.uniqueId}}</text>
</div>
</div>
</template>
<script>
export default {
// 页面级组件的数据模型
data: {
list: [
{
uniqueId: 1,
},
{
uniqueId: 2,
},
],
},
}
</script>for指令根据源数据数组渲染列表，支持的写法如下（其中{{}}可以省略）：
for="{{list}}"：`list`为源数据数组，默认的数组元素名为`$item`
for="{{value in list}}"：`value`为自定义的数组元素名，默认的数组元素索引名为`$idx`
for="{{(index, value) in list}}"：`index`为自定义的数组元素索引名，`value`为自定义的数组元素名for指令的tid属性用于指定数组元素的唯一 Id，若未指定，默认使用数组索引($idx)作为唯一 Id。tid属性的作用在于元素节点重用，优化 for 循环的重绘效率
示例代码中，tid="uniqueId"表示使用数组list的数组元素$item.uniqueId作为数组元素的唯一 Id，且必须保证 uniqueId 这个属性值在每个数组元素都不一样。
使用tid属性时应注意：
tid属性指定的数据属性必须存在，否则可能导致运行异常tid属性指定的数据属性要保证唯一，否则可能导致性能问题tid属性目前不支持表达式。
条件渲染
分为 2 种：if/elif/else 和 show。它们的区别在于：if 为 false 时，组件会从 DOM 中移除，而 show 仅仅是渲染时不可见，组件依然存在于 DOM 中;
if/elif/else 节点必须是相邻的兄弟节点，否则无法通过编译
<template>
<div>
<text if="{{display}}">Hello-1</text>
<text elif="{{display}}">Hello-2</text>
<text else>Hello-3</text>
</div>
</template>
<script>
export default {
// 页面级组件的数据模型
data: {
display: false,
},
}
</script>show 等同于 visible=none, 主要用于在原生组件上声明；
show 指令开始支持在自定义组件上进行声明，当这样使用时，等同于在该自定义子组件的根节点上使用 show 指令；
对于之前版本，自定义组件不支持 show 指令的需求，可以通过 props 传入参数，在自己内部使用 show 来控制是否可见；
<template>
<text show="{{visible}}">Hello</text>
</template>
<script>
export default {
// 页面级组件的数据模型
data: {
visible: false,
},
}
</script>逻辑控制块
<template>
<list>
<div for="cities">
<list-item type="city">
<text>{{$item.name}}</text>
</list-item>
<list-item type="spot" for="$item.spots">
<text>{{$item.address}}</text>
</list-item>
</div>
</list>
</template>
<script>
export default {
// 页面级组件的数据模型
data: {
cities: [
{
name: 'beijing',
spots: [
{
address: 'XXX',
},
],
},
{
name: 'shanghai',
spots: [
{
address: 'XXX',
},
{
address: 'XXX',
},
],
},
],
},
}
</script>