Salesforce LWC HTML 模板：快速构建用户界面

HTML 模板基础

HTML 模板是用于定义组件用户界面的文本文件。它们使用 HTML 和特殊的 LWC 语法来创建组件的结构和外观。HTML 模板可以包含以下元素：

• HTML 元素：这些是标准的 HTML 元素，如 <div>, <p>, 和 <button>.
• LWC 元素：这些是 LWC 特有的元素，如 <lightning-input> 和 <lightning-button>.
• 表达式：这些是用于动态生成内容的特殊语法。
• 注释：这些是用于添加注释的特殊语法。

数据绑定

数据绑定是一种将组件模板中的属性绑定到组件 JavaScript 类中的属性的机制。这允许您在组件的模板和 JavaScript 类之间共享数据。要进行数据绑定，您需要在模板中使用花括号将属性括起来：

{property}

例如，以下代码将组件模板中的 name 属性绑定到组件 JavaScript 类中的 name 属性：

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

当您在组件 JavaScript 类中更新 name 属性时，组件模板中的 name 属性也会自动更新。

构建 LWC 组件

要构建一个 LWC 组件，您需要创建一个 HTML 模板和一个 JavaScript 类。HTML 模板定义组件的用户界面，JavaScript 类定义组件的行为。

创建 HTML 模板

要创建一个 HTML 模板，您需要创建一个 .html 文件并将其保存在组件目录中。HTML 模板的名称必须与组件的名称相同。例如，如果您正在创建一个名为 my-component 的组件，则 HTML 模板的名称应为 my-component.html。

创建 JavaScript 类

要创建一个 JavaScript 类，您需要创建一个 .js 文件并将其保存在组件目录中。JavaScript 类的名称必须与组件的名称相同。例如，如果您正在创建一个名为 my-component 的组件，则 JavaScript 类的名称应为 my-component.js。

注册组件

要注册组件，您需要在 lwc.register 函数中传递组件的名称和 JavaScript 类。例如，以下代码注册 my-component 组件：

lwc.register('my-component', class MyComponent extends LightningElement {
    // ...
});

结论

Salesforce LWC HTML 模板提供了一种简单而强大的方式来构建用户界面。通过使用 HTML 模板，您可以轻松创建动态且响应迅速的 UI 组件。在本指南中，我们探讨了如何使用 HTML 模板构建 LWC 组件，以及如何使用数据绑定将组件模板中的属性绑定到组件 JavaScript 类中的属性。