教程 其他 框架 组件 接口

框架指令

了解框架提供的指令与组件:for,if,show,block,slot

通过本节,你将学会:

  • 指令 for
  • 指令 if 与指令 show
  • 组件 block
  • 组件 slot

指令 for

for 指令用于循环输出一个数组类型的数据

示例如下:

<template>
  <div class="tutorial-page">
    <!-- 方式1:默认$item代表数组中的元素, $idx代表数组中的索引 -->
    <div class="tutorial-row" for="{{list}}">
      <text>{{$idx}}.{{$item.name}}</text>
    </div>
    <!-- 方式2:自定义元素变量名称 -->
    <div class="tutorial-row" for="value in list">
      <text>{{$idx}}.{{value.name}}</text>
    </div>
    <!-- 方式3:自定义元素、索引的变量名称 -->
    <div class="tutorial-row" for="(personIndex, personItem) in list">
      <text>{{personIndex}}.{{personItem.name}}</text>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
    .tutorial-row {
      width: 85%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
</style>

<script>
  export default {
    private: {
      list: [
        {name: 'aa'},
        { name: 'bb' }
      ]
    },
    onInit () {
      this.$page.setTitleBar({ text: '指令for' })
    }
  }
</script>

在渲染页面时, div.tutorial-row的结构,会根据 script 中的数据 list 的定义,被循环的生成多个

注意:

  • 自定义变量表示 for 指令的数组索引和数组元素时,变量名不可以用$_开头;

指令 if 与指令 show

if 条件指令,是指 if/elif/else 这 3 个相关指令,用于控制是否增加或者删除组件;

show 指令,是指是否显示组件,用于控制组件的显示状态,并不会从 DOM 结构中删除

示例如下:

<template>
  <div class="tutorial-page">
    <text onclick="onClickShow">显示隐藏:</text>
    <text show="{{showVar}}">show: 渲染但控制是否显示</text>

    <text onclick="onClickCondition">条件指令:</text>
    <text if="{{conditionVar === 1}}">if: if条件</text>
    <text elif="{{conditionVar === 2}}">elif: elif条件</text>
    <text else>else: 其余</text>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
</style>

<script>
  export default {
    private: {
      showVar: true,
      conditionVar: 1
    },
    onInit () {
      this.$page.setTitleBar({ text: '指令if与指令show' })
    },
    onClickShow () {
      this.showVar = !this.showVar
    },
    onClickCondition () {
      this.conditionVar = ++this.conditionVar % 3
    }
  }
</script>

当 if/elif 指令的值为 false 时,节点会从页面中移除,当 if/elif 指令值为 true,组件会动态插入节点中;

当 show 指令的值为 true 时,节点可见, 当其值为 false 时,组件不可见,但节点仍会保留在页面 DOM 结构中

注意:

  • if/elif/else 节点必须是相邻的兄弟节点

组件 block

block 组件是表达逻辑区块的组件,没有对应的Native组件。可以使用<block>实现更为灵活的"列表/条件渲染"。如在<block>上使用 for 指令和 if 指令

示例如下:

<template>
  <div class="tutorial-page">
    <text onclick="toggleCityList">点击:控制是否显示城市</text>
    <div class="city" for="city in cities" if="{{showCityList === 1}}">
      <text>城市:{{city.name}}</text>
      <block if="{{city.showSpots}}" for="{{city.spots}}">
        <text>景点:{{$item.name}}</text>
      </block>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
  .city {
    flex-direction: column;
  }
</style>

<script>
  import {dataDirective} from '../../Common/js/data'

  export default {
    private: {
      showCityList: 1,
      cities: dataDirective
    },
    onInit () {
      this.$page.setTitleBar({ text: '组件block' })
    },
    toggleCityList () {
      this.showCityList = this.showCityList === 1 ? 0 : 1
    }
  }
</script>

这个示例有点复杂,综合了前述的知识点。对示例中的变量解释如下:

  • showCityList 用于控制是否在页面中生成列表元素即城市的列表
  • cityList 数组代表需要列表渲染的城市列表数据
  • cityList 数组的每个元素中的 showSpots,决定了是否显示当前 city 的 spots 数据

读者可以看到,通过这些组合,可以表达复杂的业务逻辑

组件 slot

slot 节点用于向开发者额外开发的自定义 ux 组件中插入内容;

通常自定义组件的模板中提供slot组件,当该组件被引入到页面组件中后,开发者可以灵活定义该自定义组件内部的子内容。

示例如下:

自定义组件part1.ux

<!-- par1.ux -->
<template>
  <div>
    <text>{{ header }}</text>
    <slot></slot>
    <text>{{ footer }}</text>
  </div>
</template>

<script>
  export default {
    props: [
      'header', 'footer'
    ]
  }
</script>

自定义组件使用者页面index.ux

<!-- index.ux -->
<import src="./part1"></import>
<template>
  <part1 class="component" header="{{header}}" footer="{{footer}}">
    <text>slot节点内容</text>
  </part1>
</template>

<style>
  .component {
    flex-direction: column;
  }
</style>

<script>
  export default {
    private: {
      header: 'HEAD',
      footer: 'FOOT'
    },
    onInit () {
      this.$page.setTitleBar({ text: '组件slot' })
    }
  }
</script>

在子组件中使用 slot 组件,使得子组件接纳调用者传入的子内容,从而动态渲染子组件,得到最终的页面

总结

指令 for、if、show 与组件 block 是很常用的,掌握使用方法很有必要!

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容