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 进行计算属性处理
- 简单模版
组件模版
<template>
{propertyName}
</template>
组件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();
}
}
- 组件模版
<template>
Uppercased Full Name: {uppercasedFullName}
</template>
列表渲染
如果需要渲染列表，我们可以使用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>