Lightning Web Components 强大之处在于模版系统，使用了虚拟dom 进行智能高效的组件渲染。
使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据
数据绑定
我们可以使用{property} 绑定组件模版属性到一个组件js 类中的属性
-
一个简单的例子
组件classimport { LightningElement, api } from 'lwc';
export default class Example extends LightningElement {
@api name = 'World!';}
组件模版
<template> Hello, {name} </template>
- 说明
以上@api 表明属性name 是public 的，去掉之后表明属性是private 的，对于数据绑定{name}不能包含空格，同时包含表达式的
计算值也是非法的，实际我们需要使用getter解决
处理用户输入
输入我们帮助我们进行数据变更的处理
-
一个简单例子
组件classimport { 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>
组件模版
</template>{propertyName}
组件class
import { LightningElement } from 'lwc'; export default class Component extends LightningElement { get propertyName() { // Compute a value for propertyName } }
-
一个demo
组件classimport { 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
组件classimport { 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
组件classimport { 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
组件classimport { 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>