Lightning Web Components html_templates（三）

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

数据绑定

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

一个简单的例子
组件class

import { LightningElement, api } from 'lwc';

export default class Example extends LightningElement {
```
@api name = 'World!';
```
}

组件模版

<template>

    Hello, {name}

</template>

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

处理用户输入

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

一个简单例子
组件class

import { LightningElement, track } from 'lwc';

export default class HelloBinding extends LightningElement {
```
@track name = 'World';
```
```
handleInput(event) {

    this.name = event.target.value;

}
```
}

组件模版

<template>

  <div>

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

    Name:

    <input

      type="text"

      value={name}

      oninput={handleInput}

    ></input>

  </div>

</template>

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

使用`getter` 进行计算属性处理

简单模版
组件模版

组件class

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 {

firstName = 'Web';

lastName = 'Component';

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 {

contacts = [

    {

        Id: '003171931112854375',

        Name: 'Amy Taylor',

        Title: 'COO',

    },

    {

        Id: '003192301009134555',

        Name: 'Michael Jones',

        Title: 'CTO',

    },

    {

        Id: '003848991274589432',

        Name: 'Jennifer Wu',

        Title: 'CEO',

    },

];

}

组件模版

<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 {
```
contacts = [

    {

        Id: '003171931112854375',

        Name: 'Amy Taylor',

        Title: 'COO',

    },

    {

        Id: '003192301009134555',

        Name: 'Michael Jones',

        Title: 'CTO',

    },

    {

        Id: '003848991274589432',

        Name: 'Jennifer Wu',

        Title: 'CEO',

    },

];
```
}

组件模版

<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 {
```
@track isTrueTemplate = false;
```
}

组件模版

<template>

  <div>

    <template if:true={isTrueTemplate}>

      This is the true template.

    </template>

    <template if:false={isTrueTemplate}>

      This is the false template.

    </template>

  </div>

</template>