JS应用框架文档

# 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 {
    press(e) {
      console.log('handleClick');
    }
  }
</script>

事件回调支持的写法（其中{{}}可以省略）：

"fn"：fn 为事件回调函数名（在``中有对应的函数实现）

"fn(a,b)"：函数参数例如 a，b 可以是常量，或者是在``中定义的页面的数据变量(前面不用写 this)

"a+b"：表达式，其中 a,b 数据类型与上面相同

回调函数被调用时，会在参数列表末尾自动添加一个 evt 参数，通过 evt 参数访问回调事件相关上下文数据（数据内容具体参看组件回调事件说明），例如点击事件的点击位置 x,y

# 列表渲染

<template>
  <div>
    <div for="{{list}}" tid="id">
      <text>{{$idx}}</text>
      <text>{{$item.name}}</text>
    </div>
      <!-- 自定义元素变量名称 -->
      <div for="{{value in list}}" tid="id">    
          <text>{{$idx}}.{{value.name}}</text>
      </div>
      <!-- 自定义元素变量、索引名称 -->
      <div for="{{(index, value) in list}}" tid="id">    
          <text>{{index}}.{{value.name}}</text>
      </div>
  </div>
</template>

<script>
  export default {
    data: {
      list: [
        {id: 1, name: 'jack', age: 18}, 
      	{id: 2, name: 'tony', age: 19},
      ]
    }
  }
</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="id" 表示使用数组 list 的数组元素 $item.name 作为数组元素的唯一 Id，且必须保证 id 这个属性值在每个数组元素都不一样。

使用 tid 属性时应注意：

  • tid 属性指定的数据属性必须存在，否则可能导致运行异常
  • tid 属性指定的数据属性要保证唯一，否则可能导致性能问题
  • tid 属性目前不支持表达式。

# 条件渲染

条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；

另外，当使用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方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为none。

<template>
  <text show="{{visible}}">Hello</text>
</template>

<script>
  export default {
    data: {
      visible: false
    }
  }
</script>

说明：

禁止在同一个元素上同时设置for和if属性。

← style 样式 →