Lightning Web Components html_templates（三） 4年前

Lightning Web Components 强大之处在于模版系统，使用了虚拟dom 进行智能高效的组件渲染。
使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据

数据绑定

我们可以使用{property} 绑定组件模版属性到一个组件js 类中的属性

• 一个简单的例子
  组件class

  import { LightningElement, api } from 'lwc';

  ​

  export default class Example extends LightningElement {

  
  copy
  @api name = 'World!';
  
  

  }

组件模版

copy
<template>

    Hello, {name}

</template>

• 说明
  以上@api 表明属性name 是public 的，去掉之后表明属性是private 的，对于数据绑定{name} 不能包含空格，同时包含表达式的
  计算值也是非法的，实际我们需要使用getter 解决

处理用户输入

输入我们帮助我们进行数据变更的处理

• 一个简单例子
  组件class

  import { LightningElement, track } from 'lwc';

  export default class HelloBinding extends LightningElement {

  
  copy
  @track name = 'World';
  
  

  ​

  
  copy
  handleInput(event) {
  
      this.name = event.target.value;
  
  }
  
  

  }

组件模版

copy
<template>

  <div>

    <p>Hello, {name}!</p>

    Name:

    <input

      type="text"

      value={name}

      oninput={handleInput}

    ></input>

  </div>

</template> 

• 说明
  以上input 元素使用oninput 处理值的变更，当数据变更的时候handlerInput 函数被执行，上边的代码
  使用了 @track 装饰器，说明属性值变动的时候进行模版渲染，如果去掉了，尽管数据变动了，但是
  模版不会重新进行渲染

使用getter 进行计算属性处理

• 简单模版
  组件模版

组件class

copy
import { LightningElement } from 'lwc';

export default class Component extends LightningElement {

    get propertyName() {

        // Compute a value for propertyName

     }

}

• 一个demo
  组件class

  import { LightningElement } from 'lwc';

  ​

  export default class HelloExpr extends LightningElement {

  
  copy
  firstName = 'Web';
  
  lastName = 'Component';
  
  

  ​

  
  copy
  get uppercasedFullName() {
  
      const fullName = `${this.firstName} ${this.lastName}`;
  
      return fullName.trim().toUpperCase();
  
  }
  
  

  }

• 组件模版

列表渲染

如果需要渲染列表，我们可以使用for:each 或者 iterator 指令 ，
iterator 指令包好了first,last 我们可以方便的处理数组数据，同时注意我们需要提供key 指令
方便对于每条数据的是唯一处理（这点好多框架都是一样的）

• for:each 指令
  格式for:each={array} 访问当前的元素可以使用for:item="currentItem" 访问索引可以使用for:index="index"
  同时结合上边说明，每个item 需要提供一个key
  一个简单demo
  组件class

  import { LightningElement } from 'lwc';

  ​

  export default class HelloForEach extends LightningElement {

  
  copy
  contacts = [
  
      {
  
          Id: '003171931112854375',
  
          Name: 'Amy Taylor',
  
          Title: 'COO',
  
      },
  
      {
  
          Id: '003192301009134555',
  
          Name: 'Michael Jones',
  
          Title: 'CTO',
  
      },
  
      {
  
          Id: '003848991274589432',
  
          Name: 'Jennifer Wu',
  
          Title: 'CEO',
  
      },
  
  ];
  
  

  }

组件模版

copy
<template>

    <ul>

      <template for:each={contacts} for:item="contact">

        <li key={contact.Id}>

          {contact.Name}, {contact.Title}

        </li>

      </template>

    </ul>

</template>

• iterator 指令
  格式iterator:iteratorName={array} iterator 可以提供比较多的属性方便我们进行操作
  value 可以用来访问array 的属性 格式为：iteratorName.value.propertyName
index 元素在数组中的索引
  first 一个布尔值可以用来确定是否是数组的第一条数据
  last 一个布尔值可以用来确定是否是数组的最后一条数据
  一个简单demo
  组件class

  import { LightningElement } from 'lwc';

  ​

  export default class HelloIterator extends LightningElement {

  
  copy
  contacts = [
  
      {
  
          Id: '003171931112854375',
  
          Name: 'Amy Taylor',
  
          Title: 'COO',
  
      },
  
      {
  
          Id: '003192301009134555',
  
          Name: 'Michael Jones',
  
          Title: 'CTO',
  
      },
  
      {
  
          Id: '003848991274589432',
  
          Name: 'Jennifer Wu',
  
          Title: 'CEO',
  
      },
  
  ];
  
  

  }

组件模版

copy
<template>

    <ul>

      <template iterator:it={contacts}>

        <li key={it.value.Id}>

          <div if:true={it.first} class="list-first"></div>

          {it.value.Name}, {it.value.Title}

          <div if:true={it.last} class="list-last"></div>

        </li>

      </template>

    </ul>

</template>

说明： 注意如果我们需要访问item 的属性信息，需要使用iteratorName.value.propertyName 而不是
iteratorName.propertyName

条件渲染dom 元素

对于条件渲染dom 元素我们可以使用if:true|false={property}

• 一个参考demo
  组件class

  import { LightningElement, track } from 'lwc';

  ​

  export default class HelloIf extends LightningElement {

  
  copy
  @track isTrueTemplate = false;
  
  

  }

组件模版

copy
<template>

  <div>

    <template if:true={isTrueTemplate}>

      This is the true template.

    </template>

    <template if:false={isTrueTemplate}>

      This is the false template.

    </template>

  </div>

</template>

参考资料

https://lwc.dev/guide/html_templates