Lit框架笔记1、什么是Lit框架？帮助开发者更方便地编写webcomponent的一种框架 2、Lit的基本工作方式

1、什么是Lit框架？帮助开发者更方便地编写webcomponent的一种框架

2、Lit的基本工作方式：

Typescript
@customElement('my-element')
export class MyElement extends LitElement {
  @property()
  version = 'STARTING';

  render() {
    return html`
    <p>Welcome to the Lit tutorial!</p>
    <p>This is the ${this.version} code.</p>
    `;
  }
}

<my-element></my-element>

关键在于customElement、 class extends LitElement render()函数

3、响应式的property @property() 定义的是响应式的属性属性值改变时，会重新渲染

4、事件在render函数中写以下代码：

<input @input=${this.changeName} placeholder="Enter your name">

监听的是input元素的input事件 changeName定义在类里：

changeName(event: Event) {

}

5、元素上的更多表达式： ?hidden = ${} .value = ${}

6、渲染列表 html``中写

${this._listItems.map(item => {
    html`<li>${item.name}</li>`
})}

7、查询元素 @query() input: HTMLInputElement

8、定义样式属性

在类中定义

static styles = css`
 .classNanme {
 }
`

在render中使用样式属性：

class=${item.completed ? 'classNanme' : ''}

9、在render中进行条件渲染

render中定义几个html``

const todos = html``