Lit（六）：模板

Lit（六）：模板
模板概述

Lit 模板是使用带有html标签的 JavaScript 模板文字编写的。文字的内容大多是简单的、声明性的 HTML：
```
html`Hello ${name}`
1
```
表达式

 子表达式

出现在元素的开始和结束标记之间的表达式可以将子节点添加到元素。
```
html`Hello, ${name}`
1
```
模板

由于子位置的表达式可以返回 aTemplateResult您可以嵌套和组合模板：
```
const nav = html`...`;
const page = html`
  ${nav}
  ...
`;
1
2
3
4
5
```
```
html`
  ${this.user.isloggedIn
      ? html`Welcome ${this.user.name}`
      : html`Please log in`
  }
`;
1
2
3
4
5
6
```
dom节点

任何 DOM 节点都可以传递给子表达式。通常 DOM 节点应该通过使用指定模板来呈现html，但 DOM 节点可以在需要时像这样直接呈现。该节点在该点附加到 DOM 树，因此从任何当前父节点中删除：
```
const div = document.createElement('div');
const page = html`
  ${div}
  This is some text
`;
1
2
3
4
5
```
属性表达式
```
html`${this.textClass}>Stylish text.`;
1
```
由于属性值始终是字符串，因此表达式应该返回一个可以转换为字符串的值。

布尔属性

要设置布尔属性，请使用?属性名称的前缀。如果表达式计算结果为真值，则添加该属性，如果计算结果为假值，则删除该属性：
```
html`${!this.showAdditional}>This text may be hidden.`;
1
```
删除属性

对于常见的“布尔属性”，例如disabled，hidden您希望将属性设置为空字符串以获得真实值，否则将其删除，请使用布尔属性。但是，有时您可能需要不同的条件（underfind、null、空字符串）来添加或删除属性。
- underfind、null
```
html`${this.imagePath ?? nothing}/${this.imageFile ?? nothing}">`;
1
```
nothing 相当于一个关键字，标识未定义或者null

也可以使用ifDefined 指令来代替
```
html`${ifDefined(this.imagePath)}/${ifDefined(this.imageFile)}">`
1
```
- 空字符串
```
html``
1
```
.语法

.您可以使用前缀和属性名称在元素上设置 JavaScript 属性：
```
html`${this.itemCount}>`;
1
```
如果是常见类型，例如string、number之类的.可以省略，但是如果是数组或者对象则必须加上.
```
 <demo-test .msg=${{ age: 1, name: "哈哈哈" }}></demo-test>
1
```
事件表达式

模板还可以包括声明性事件侦听器。使用前缀@后跟事件名称。该表达式应评估为事件侦听器。这点与vue基本一样
```
html``;
1
```
元素表达式

您还可以添加访问元素实例的表达式，而不是元素上的单个属性或属性：
```
html`${myDirective()}>`
1
```
元素表达式仅适用于指令。元素表达式中的任何其他值类型都将被忽略。

可以在元素表达式中使用的一个内置指令是ref指令。它提供了对渲染元素的引用。
```
html`
```
有效的表达式位置

表达式只能出现在您可以在 HTML 中放置属性值和子元素的地方。以下位置都是无效的：
- 出现在标签或属性名位置
```

<${tagName}></${tagName}>


<div ${attrName}=true></div>
1
2
3
4
5
```
- 内部

模板概述

Hello ${name}

表达式

子表达式

属性表达式

事件表达式

元素表达式

有效的表达式位置