DEX470

课程介绍

今天我们来学习如何在Salesforce中创建一个简单的“Hello World” Lightning Web组件（LWC）。这个组件将会在页面上显示“Hello World”这几个字。别担心，我会一步一步带你完成这个过程。 ### 第一步：创建组件文件夹 首先，我们需要在Salesforce中创建一个新的Lightning Web组件。你可以使用Salesforce的开发者控制台（Developer Console）或者Visual Studio Code（VS Code）来完成这个步骤。 1. 打开你的开发者工具（比如VS Code）。 2. 在项目中，右键点击`lwc`文件夹，选择“新建文件”。 3. 给这个文件命名为`helloWorld`。Salesforce会自动为你生成三个文件：`helloWorld.html`、`helloWorld.js`和`helloWorld.js-meta.xml`。 ### 第二步：编写HTML文件 接下来，我们打开`helloWorld.html`文件，编写组件的HTML部分。 ```html <p class="slds-p-horizontal_small">Hello World!</p> ``` 在这个HTML文件中，我们使用了``组件来创建一个卡片，并在卡片中显示“Hello World!”。 ### 第三步：编写JavaScript文件 然后，我们打开`helloWorld.js`文件。这个文件是用来处理组件的逻辑的，不过在这个简单的例子中，我们暂时不需要写任何逻辑代码。 ```javascript import { LightningElement } from &#39;lwc&#39;; export default class HelloWorld extends LightningElement {} ``` 这个文件导入了`LightningElement`，并定义了一个名为`HelloWorld`的类。这个类继承了`LightningElement`，表示它是一个Lightning Web组件。 ### 第四步：编写XML文件 最后，我们打开`helloWorld.js-meta.xml`文件。这个文件是用来定义组件的元数据的，比如组件是否可以在App Builder中使用。 ```xml 57.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ``` 在这个XML文件中，我们设置了`isExposed`为`true`，表示这个组件可以在App Builder中使用。我们还定义了组件可以在哪些页面上使用，比如App页面、记录页面和主页。 ### 第五步：部署并测试组件 现在，我们已经完成了组件的编写。接下来，我们需要将这个组件部署到Salesforce中，并在页面上进行测试。 1. 保存所有文件。 2. 使用Salesforce CLI或者开发者工具将组件部署到你的Salesforce组织中。 3. 打开Salesforce的App Builder，创建一个新的页面或者编辑现有的页面。 4. 在组件库中找到你刚刚创建的`helloWorld`组件，并将其拖到页面上。 5. 保存并激活页面。 现在，当你打开这个页面时，你应该会看到一个卡片，上面显示着“Hello World!”。 ### 总结 恭喜你！你已经成功创建了一个简单的“Hello World” Lightning Web组件。虽然这个组件非常简单，但它为你打下了坚实的基础。接下来，你可以尝试添加更多的功能，比如按钮点击事件、数据绑定等等。 希望这个教程对你有帮助！如果你有任何问题，随时问我。我们下次再见！

课程章节

本课程共有 24 个章节

• 1

  Bear-Tracking App with Lightning Web Components

  第 9 页

  让我们来聊聊这个有趣的熊追踪应用程序吧！想象一下，你正在为Ursus Park这个虚拟的国家公园工作，你的任务是帮助护林员们更好地追踪公园里的熊。听起来是不是很酷？ 在这个项目中，你会用到Lightning Web组件来构建这个应用程序。简单来说，Lightning Web组件就像是一个个小积木，你可以用它们来搭建出你想要的应用程序。在这个项目中，你会用到四个主要的组件：HelloWorld、BearList、BearTile和BearMap。 现在，让我们重点看看BearList和BearTile这两个组件。BearList是一个列表组件，它会显示所有在公园里游荡的熊的信息。而BearTile则是一个小卡片组件，它负责展示每一只熊的详细信息，比如名字、位置等等。 那么，这里的关键概念是什么呢？其实就是“组成”。你可以把BearTile组件看作是BearList组件的一部分。也就是说，BearList组件是由多个BearTile组件组成的。就像你搭积木一样，你可以把多个小积木组合在一起，形成一个更大的结构。 所以，当你看到BearList组件时，它其实是由多个BearTile组件组成的。这就是组件开发中的一个重要概念——一个组件可以包含另一个组件。通过这种方式，你可以轻松地构建出复杂的应用程序，而不需要从头开始写每一行代码。 希望这个解释能帮助你更好地理解Lightning Web组件的概念！如果你有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 2

  Evolution of the Web Stack

  第 10 页

  让我们来聊聊Salesforce的Aura组件和它的演变过程。这个故事开始于2014年，那时候Salesforce推出了Aura组件框架。这个框架是为了帮助开发者更容易地构建动态的、响应式的用户界面。Aura框架引入了一个新的组件模型和模块化编程模型，这在当时是非常先进的。 但是，随着时间的推移，到了2019年，Web标准有了很大的进步。很多以前需要依赖框架才能实现的功能，现在浏览器自己就能支持了。这意味着开发者不再需要依赖于特定的组件模型、语言扩展或者模块。这大大简化了开发过程，也提高了应用的性能和兼容性。 所以，从2014年到2019年，我们看到了从专有技术向开放标准的转变。这不仅让开发变得更加高效，也让最终用户得到了更好的体验。这就是Aura组件和Web技术演变的简要历史。希望这能帮助你更好地理解Salesforce的技术发展。

  ▶ 播放视频 查看详情
• 3

  What are Lightning Web Components?

  第 11 页

  大家好，今天我们来聊聊Salesforce中的Lightning Web Components，简称LWC。想象一下，如果你要建一座房子，你需要各种工具和材料，LWC就像是Salesforce提供的一套高级工具，帮助你更快、更高效地构建应用程序。 首先，LWC是一种新的编程模型，它基于最新的Web标准，这意味着它非常现代化，能够提供无与伦比的性能。你可以把它看作是构建Salesforce应用的一种更先进、更快速的方法。 LWC在Salesforce的核心技术之上，提供了一层专门的服务。这包括几个关键部分： 1. ，Base Lightning Components，：这是一组超过70个的UI组件，它们都是作为自定义元素构建的。你可以把这些组件看作是预制的建筑材料，比如门、窗、墙等，你可以直接使用它们来快速搭建你的应用界面。 2. ，Lightning Data Service，：这个服务提供了一种声明式的方式来访问Salesforce的数据和元数据。它还提供了数据缓存和数据同步的功能。简单来说，就是它可以帮助你轻松地获取和更新数据，而不需要写很多复杂的代码。 3. ，用户界面API，：这是一个底层的服务，它使得Base Lightning Components和Lightning Data Service能够感知元数据。这意味着这些组件和服务可以自动适应Salesforce的元数据变化，从而大大提高开发效率。 LWC不仅可以独立使用，还可以与旧的Aura模型共同操作。这就像是你既可以使用新的电动工具，也可以继续使用你熟悉的手动工具，两者可以很好地配合使用。 总的来说，LWC提供了一种更现代、更高效的方式来构建Salesforce应用，它利用了最新的Web技术，提供了强大的性能和灵活性。无论你是Salesforce的新手还是老手，掌握LWC都将是你技能库中的一个宝贵资产。希望这个解释能帮助你更好地理解Lightning Web Components。谢谢大家！

  ▶ 播放视频 查看详情
• 4

  Naming Rules

  第 12 页

  让我们来聊聊Salesforce中的Lightning Web Components（LWC）的命名规则和文件夹内容。这部分内容对于确保你的组件能够正确运行非常重要。 首先，当你使用Salesforce CLI创建一个新的LWC时，CLI会自动为你生成一个文件夹，里面包含了HTML、JavaScript和元数据文件。当然，你也可以选择手动创建这些文件和文件夹。但无论哪种方式，文件夹和里面的文件都必须遵循相同的命名规则。 命名规则有几个关键点需要注意： 1. ，必须以小写字母开头，：这意味着你的组件名称不能以大写字母或数字开头。 2. ，只能包含字母数字或下划线字符，：你可以使用字母（a-z）、数字（0-9）和下划线（_），但不能使用其他特殊字符，比如连字符（-）。 3. ，在命名空间中必须是唯一的，：这意味着在你的Salesforce环境中，不能有两个组件使用相同的名称。 4. ，不能包含空格，：组件名称中不能有空格。 5. ，不能以下划线结尾，：虽然你可以使用下划线，但不能以下划线作为名称的结尾。 6. ，不能包含两个连续的下划线，：虽然可以使用下划线，但不能有两个下划线连在一起。 7. ，文件夹和文件名称必须具有相同的“前缀名称”，：这意味着你的文件夹名称和里面的文件名称必须一致，包括大小写和下划线的使用。 举个例子，如果你有一个组件叫做“myComponent”，那么你的文件夹名称也必须是“myComponent”，里面的HTML文件、JavaScript文件和元数据文件也都必须命名为“myComponent.html”、“myComponent.js”和“myComponent.js-meta.xml”。 遵循这些规则，可以确保你的LWC在Salesforce环境中能够正确运行，并且避免命名冲突。希望这些信息对你有所帮助！

  ▶ 播放视频 查看详情
• 5

  Which Files to Include?

  第 13 页

  让我们来简单明了地讲解一下Salesforce Lightning组件需要包含哪些文件。 首先，组件主要分为两种类型：UI组件和服务组件。 ，UI组件，，也就是用户界面组件，它们需要三个基本文件： 1. ，HTML文件，：这是组件的骨架，定义了组件的结构。每个UI组件都必须有一个HTML文件，且根标签必须是``。 2. ，JavaScript文件，：这是组件的大脑，定义了组件的行为和逻辑。它负责处理用户交互和数据绑定。 3. ，元数据配置文件，：这个文件包含了组件的配置信息，比如在Lightning App Builder和Community Builder中的设计设置。 ，服务组件，，它们更像是可复用的库，只需要两个文件： 1. ，JavaScript文件，：同样，这是组件的核心，定义了库的功能。 2. ，元数据配置文件，：这个文件包含了库的配置信息。 ，注意，：无论是UI组件还是服务组件，它们的文件名（不包括扩展名）必须相同，这样Salesforce框架才能正确地将它们关联起来。 此外，组件还可以包含以下可选文件： - ，CSS文件，：用于设置组件的样式。 - ，SVG图标文件，：可以用作Lightning App Builder和Community Builder中的自定义图标。 - ，其他JavaScript文件，：用于共享代码或模块化开发。 - ，测试文件，：如果你想为组件创建Jest测试，可以在组件文件夹的顶层创建一个名为`__tests__`的文件夹，并将测试文件保存在这里。 最后，每个组件都属于一个，命名空间，，这是Salesforce用来组织和管理组件的一种方式。 希望这个解释能帮助你更好地理解Salesforce Lightning组件的文件结构。如果有任何疑问，随时提问！

  ▶ 播放视频 查看详情
• 6

  Defining a Lightning Web Component in VS Code

  第 14 页

  让我们来聊聊在VS Code中如何定义Lightning Web组件（LWC）。首先，VS Code是一个非常强大的代码编辑器，而Salesforce为它提供了一个扩展，这个扩展让VS Code变得“上下文感知”。这是什么意思呢？简单来说，就是VS Code能够根据你正在工作的文件类型，提供相应的功能和选项。 比如说，如果你在VS Code中右键点击一个LWC文件夹，你会看到一个选项叫“创建Lightning Web组件”。点击这个选项，VS Code就会帮你生成一个新的LWC组件的基本结构，包括HTML、JavaScript和CSS文件。这样，你就可以直接开始编写你的组件代码了。 同样地，如果你右键点击一个Apex类的文件夹，你会看到一个选项叫“创建Apex类”。点击这个选项，VS Code就会帮你生成一个新的Apex类的基本结构，你就可以开始编写你的Apex代码了。 这些功能大大简化了开发流程，让你可以更专注于编写代码，而不是花时间去设置文件结构。希望这些信息对你有帮助！

  ▶ 播放视频 查看详情
• 7

  Basic UI Component - JavaScript File

  第 15 页

  让我们来聊聊Salesforce中的Lightning Web Components（LWC）和它们的基本JavaScript文件结构。想象一下，你正在搭建一个乐高模型，每个小部件都需要一个基础来构建。在LWC中，这个基础就是JavaScript文件。 首先，我们来看第一行代码。这里，我们从LWC模块中导入了`LightningElement`。你可以把它想象成是给你的乐高模型提供了一个坚固的底座。`LightningElement`是LWC的核心，它是对标准HTML元素的一个增强版，让它们更加强大和灵活。 接下来，在第二行，我们通过扩展`LightningElement`类来创建一个新的JavaScript类。这就像是在你的乐高底座上开始搭建第一层。我们使用`export default`关键字来导出这个类，这样其他组件就可以使用它了。按照惯例，类名使用Pascal Case，也就是每个单词的首字母都大写。比如，如果你的组件叫做`myComponent`，那么类名就应该是`MyComponent`。 总结一下，每个LWC组件都需要一个JavaScript文件，这个文件至少包含导入`LightningElement`和扩展它的代码。这就像是给你的组件提供了一个起点，从这里开始，你可以添加更多的功能和特性，构建出功能丰富的用户界面。 希望这个解释能帮助你更好地理解LWC的基础结构。如果你有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 8

  Basic UI Component - HTML File

  第 16 页

  让我们来聊聊Salesforce中的基本UI组件，特别是HTML文件的部分。今天我们要重点讲的是`parentComponent.html`这个文件。 首先，每个UI组件都必须有一个HTML文件，这个文件里有一个根标签叫做``。这个HTML文件的命名是有规则的，通常是`.html`，比如你的组件叫`myDelivery`，那么HTML文件就应该命名为`myDelivery.html`。 在``标签里面，我们会以声明的方式包含Lightning Web组件的HTML。这意味着你可以在这里定义你的组件的外观和结构。而且，一个组件还可以包含另一个组件。比如在`parentComponent.html`中，我们可以包含另一个组件，像这样：``。这里的`c-my-component`就是另一个组件的引用。 这里有个小提示：在引用其他组件的时候，记得使用kebab-case命名法，也就是用短横线连接单词。 另外，``元素是用来声明那些可以在运行时展示的HTML片段的。这就像是给你的组件提供了一个展示的舞台。 最后，值得一提的是，在本课程的后面部分，我们会讨论一种特殊的组件——服务组件（库），这种组件是不需要HTML文件的。 好了，这就是关于基本UI组件和HTML文件的一些基础知识。希望这些信息能帮助你更好地理解Salesforce的UI组件是如何工作的。

  ▶ 播放视频 查看详情
• 9

  PascalCase, camelCase or kebab-case ?

  第 17 页

  同学们，今天我们来聊聊在Lightning Web组件中遇到的三种命名方式：PascalCase、骆驼Case和烤肉串Case。听起来是不是有点像是在点餐？别担心，我会用简单的方式来解释这些概念。 首先，PascalCase，这个名字来源于一种编程语言——Pascal。在这种命名方式中，每个单词的首字母都是大写的，比如“MyComponent”。在Lightning Web组件中，你通常会在类的名称中看到这种命名方式。 接下来是骆驼Case，这个名字来源于骆驼的驼峰。在这种命名方式中，第一个单词的首字母是小写的，后面的单词首字母是大写的，比如“myComponent”。这种命名方式在JavaScript文件中很常见。 最后是烤肉串Case，这个名字来源于烤肉串的串法。在这种命名方式中，单词之间用连字符连接，比如“my-component”。在Lightning Web组件中，你通常会在HTML文件中看到这种命名方式。 所以，当你编辑HTML文件时，记得使用烤肉串Case；在JavaScript文件中，使用骆驼Case；而在定义类名时，使用PascalCase。这样，你的代码不仅看起来整洁，而且符合规范。 希望这些信息能帮助你们更好地理解和使用Lightning Web组件。如果有任何疑问，随时提问哦！

  ▶ 播放视频 查看详情
• 10

  Configuration File

  第 18 页

  让我们来聊聊Salesforce中的配置文件，特别是关于Lightning Web Components（LWC）的配置文件。这个配置文件非常重要，因为它决定了你的组件如何在Salesforce的各个构建器中使用。 首先，每个LWC组件都必须有一个配置文件，这个文件的名字通常是`.js-meta.xml`。这个文件定义了组件的元数据，比如它如何在Lightning App Builder和Community Builder中被配置和使用。 在这个配置文件中，有几个关键的部分你需要特别注意： 1. ，ApiVersion，：这是一个双精度值，它决定了你的组件将使用哪个Salesforce API版本。这确保了你的组件与Salesforce的更新保持兼容。 2. ，描述，：这里你需要提供一个简短的描述，通常是一句话。这个描述会在设置中的Lightning组件列表里显示，也会在Lightning App Builder和Community Builder中作为工具提示出现。 3. ，IsExposed，：这是一个布尔值（True或False）。如果你想在所有组织以及Lightning App Builder和Community Builder中公开你的组件，你需要将这个值设置为True。这样，你的组件就可以在托管包中使用了。 4. ，Master Label，：这是你的组件的标题。它会显示在设置中的Lightning组件列表里，以及Lightning App Builder和Community Builder中。 5. ，目标，：这部分指定了你的组件可以添加到哪些类型的Lightning页面。如果你希望你的组件出现在Lightning App Builder或Community Builder中，你需要至少指定一种Lightning页面类型。例如，`Lightning__AppPage`和`Lightning__Tab`都是常见的目标类型。 最后，记得，配置文件是让你的组件在Salesforce生态系统中正确运行的关键。确保你正确设置了这些元数据，这样你的组件就可以在需要的地方被正确使用和展示了。如果你需要更详细的信息，可以访问Salesforce的官方文档，那里有完整的配置标签列表和更深入的指导。

  ▶ 播放视频 查看详情
• 11

  Access Controls for Properties

  第 19 页

  让我们来聊聊在Salesforce中，特别是在Apex和Lightning Web Components（LWC）中，如何控制属性的访问。 首先，在Apex中，我们使用访问修饰符来明确控制类成员和方法的访问权限。这些修饰符包括私有（private）、受保护（protected）、公共（public）和全局（global）。私有成员只能在定义它们的类内部访问，受保护的成员可以在子类中访问，公共成员可以在任何地方访问，而全局成员则可以在任何命名空间中访问。 然而，在JavaScript中，特别是在LWC中，我们并不使用这些显式的访问修饰符。相反，属性的访问控制是通过装饰器和``标签的值来共同决定的。例如，如果你想让一个属性仅在组件内部可用，你可以不使用任何装饰器或者使用`@track`装饰器。如果你想让一个属性可以从父组件传递过来，你可以使用`@api`装饰器，并且将这个属性设置为`true`。 此外，如果你想让你的组件可以在App Builder中使用，你需要将``设置为`true`。这样，你的组件就会成为全局组件，并且可以在App Builder和其他目标中使用。 但是，有一个重要的警告需要注意：自定义的Lightning Web组件不能访问自定义命名空间中的其他Lightning Web组件或模块。它们只能访问`c`和`Lightning`命名空间中的组件和模块。这意味着，即使你使用了自定义命名空间，你也不能从你自己的LWC中实例化这些组件。 希望这些信息能帮助你更好地理解在Salesforce中如何控制属性的访问。如果你有更多问题，或者需要更详细的解释，请随时提问！

  ▶ 播放视频 查看详情
• 12

  What is a Property?

  第 20 页

  大家好，今天我们来聊聊Salesforce中的“属性”。想象一下，属性就像是你的个人物品，比如你的手机或者笔记本。在Salesforce中，属性是组件的一部分，它们存储数据，就像你的手机存储照片和联系人一样。 首先，我们来说说“反应性”。如果一个属性是反应性的，那么当你改变这个属性的值时，比如更新手机里的联系人，整个组件就会自动更新，就像你的手机屏幕会刷新显示新的联系人信息一样。从2020年春季开始，所有的属性默认都是反应性的，这意味着它们会自动响应数据的变化。 接下来是“访问修饰符”。这就像是决定你的物品是私有的还是公共的。私有的属性只能被组件内部使用，就像你的私人日记，只有你自己能看到。而公共的属性可以被其他组件访问，就像公共图书馆的书，谁都可以借阅。在Salesforce中，我们不需要像在Apex中那样明确指定属性是私有还是公共的，系统会自动处理。 最后，如果你想让数组或对象的更改也是反应性的，你需要使用@Track装饰器。这就像给你的物品贴上标签，告诉系统这些物品的更改需要特别注意。 希望这个简单的解释能帮助你理解Salesforce中的属性。如果你想深入了解，可以访问我提供的链接，那里有更详细的信息。谢谢大家的聆听！

  ▶ 播放视频 查看详情
• 13

  Reactivity in Private Properties with no Decorator

  第 21 页

  让我们来聊聊这个话题。想象一下，你有一个小盒子，里面装着一些东西，比如字符串、数字或者布尔值。这些就是JavaScript中的基本类型，我们通常叫它们“基元”。现在，如果你想要在盒子里面的东西发生变化时，自动通知你，那么你就需要一种机制来“观察”这些变化。 在JavaScript中，如果你使用了一些框架或者库，比如React或者Vue，它们通常会自动帮你观察这些基元的变化，并在变化时重新渲染页面。但是，如果你没有使用这些框架，或者你正在使用一些更基础的JavaScript代码，那么你就需要手动告诉系统去观察这些变化。 特别是当你使用私有属性（就是那些在类里面用`#`符号标记的属性）时，系统不会自动去观察它们。这意味着，即使你改变了这些私有属性的值，系统也不会自动更新页面。你需要显式地告诉系统去监视这些属性的变化。 同样地，如果你有一个对象或者数组，系统也不会自动观察它们内部的变化。你需要使用一些特定的方法或者工具来确保这些变化被捕捉到，并触发页面的重新渲染。 所以，记住，如果你想让你的页面在数据变化时自动更新，你需要确保系统知道它需要观察哪些数据。这就像是你需要告诉你的小盒子，当里面的东西变化时，记得敲敲盒子提醒你。 希望这个解释对你有帮助！如果你想要了解更多关于基元的信息，可以查看我提供的链接。那里有更详细的解释和例子。

  ▶ 播放视频 查看详情
• 14

  Using the @track Decorator

  第 22 页

  今天我们来聊聊Salesforce中的Lightning Web Components（LWC）里的一个装饰器——@Track。这个装饰器在LWC中非常有用，尤其是在处理对象和数组时。 首先，我们来看一个简单的例子。假设我们有一个LWC组件，里面有一个学员对象和一个课程数组。我们使用@Track来装饰这两个属性： ```javascript import { LightningElement, Track } from &#39;lwc&#39;; export default class HelloWebComponent extends LightningElement { @track student = { first: &#39;John&#39;, last: &#39;Doe&#39; }; @track classes = [&#39;DEX450&#39;, &#39;CCD102&#39;]; } ``` 在这个例子中，`student`是一个对象，`classes`是一个数组。我们使用@Track来告诉Salesforce框架，当这些属性发生变化时，需要重新渲染组件。 接下来，我们来看一下如何更新这些属性： ```javascript // 重新分配会触发重新渲染，无论是否使用@Track this.student = { first: &#39;Jane&#39;, last: &#39;Doe&#39; }; this.classes = [&#39;DEX601&#39;, &#39;DEX602&#39;]; // 由于@Track，接下来的两行只会触发重新渲染 this.student.first = &#39;Jane&#39;; this.classes.push(&#39;DEX470&#39;); ``` 这里有几个关键点需要注意： 1. ，重新分配，：当你重新分配一个对象或数组时，无论是否使用@Track，都会触发组件的重新渲染。比如，`this.student = { first: &#39;Jane&#39;, last: &#39;Doe&#39; };` 这行代码会触发重新渲染。 2. ，修改属性，：如果你只是修改对象或数组的某个属性或元素，比如 `this.student.first = &#39;Jane&#39;;` 或 `this.classes.push(&#39;DEX470&#39;);`，那么只有使用@Track装饰的属性才会触发重新渲染。 3. ，@Track的作用，：@Track装饰器主要用于告诉框架，当对象或数组的内部属性发生变化时，需要重新渲染组件。这对于保持UI的同步非常有用。 最后，有一点需要注意的是，虽然你可以将@Track应用于基本类型（比如字符串、数字等），但这并不是必要的。@Track主要用于对象和数组。 总结一下，@Track装饰器在LWC中是一个非常强大的工具，特别是在处理复杂数据结构时。它可以帮助你确保组件的UI能够及时响应数据的变化。希望这个解释对你有帮助！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 15

  What is Data Binding?

  第 23 页

  让我们来聊聊数据绑定这个概念。想象一下，你有一个应用程序，它有一个用户界面（UI），比如一个网页或者一个手机应用的屏幕。这个UI上有很多元素，比如文本框、按钮、列表等等。这些元素需要显示数据，比如用户的姓名、地址、订单信息等。 现在，这些数据通常存储在应用程序的后端，比如一个数据库或者一个JavaScript对象中。数据绑定就是把这些后端的数据和前端UI元素连接起来的过程。这样，当后端的数据发生变化时，UI上的显示也会自动更新；反过来，如果用户在UI上输入了新的数据，后端的数据也会相应地更新。 在Salesforce的Lightning Web Components（LWC）中，数据绑定默认是单向的。这意味着数据只能从JavaScript控制器流向UI，而不能反过来。也就是说，如果JavaScript中的属性值改变了，UI会自动更新，但如果用户在UI上做了更改，JavaScript中的属性值不会自动更新。 不过，LWC也支持双向数据绑定，但这需要开发者明确地设置。双向数据绑定意味着数据可以在JavaScript和UI之间双向流动。这样，无论是JavaScript中的属性值改变，还是用户在UI上的操作，都会互相影响。 在接下来的内容中，我们会通过一些代码示例来具体展示如何在LWC中实现单向和双向数据绑定。这样，你就能更清楚地理解这个概念，并在实际开发中应用它了。

  ▶ 播放视频 查看详情
• 16

  Input Field with One-Way Data Binding

  第 24 页

  让我们来聊聊Salesforce中的单向数据绑定和输入字段。想象一下，你有一个输入框，你想让它显示一个问候语，比如“你好，世界！”。你可能会在代码中设置一个属性，比如`greeting`，然后把这个属性绑定到输入框的值上。这就是我们说的单向数据绑定。 当你这样做的时候，输入框会显示`greeting`的当前值。如果`greeting`的值在后台被改变了，比如通过一些控制器代码，输入框也会自动更新显示新的值。这是因为单向数据绑定确保了数据从模型流向视图。 但是，这里有一个小问题。如果用户在输入框中打字，输入框的内容会改变，但`greeting`的值不会自动更新。这是因为单向数据绑定只保证了数据从模型流向视图，而不是反过来。 那么，如果你希望用户在输入框中打字时，`greeting`的值也能更新，该怎么办呢？这就需要双向数据绑定了。双向数据绑定不仅能让数据从模型流向视图，还能让视图中的变化反馈回模型。 在Salesforce的Lightning框架中，你可以通过监听输入框的`change`事件来实现这一点。当用户输入内容时，你可以捕获这个事件，并手动更新`greeting`的值。这样，无论是模型还是视图，都能保持同步。 总结一下，单向数据绑定适用于你只需要从模型到视图的数据流动的场景。而当你需要视图的变化也能反馈到模型时，就需要考虑使用双向数据绑定或者手动处理视图的变化了。希望这个解释能帮助你更好地理解Salesforce中的数据绑定机制！

  ▶ 播放视频 查看详情
• 17

  Input Field with Two-Way Data Binding

  第 25 页

  同学们，今天我们来聊聊如何在Salesforce中实现一个具有双向数据绑定的输入字段。这个功能听起来有点复杂，但其实很简单，我们一步步来。 首先，想象一下，你有一个输入框，用户在里面打字，然后页面上某个地方的问候语会实时更新。这就是我们要做的。 ### 第一步：创建输入字段 我们需要一个输入字段，用户可以在里面输入文字。这个输入字段会有一个`onchange`事件处理程序。`onchange`是什么意思呢？就是当用户在这个输入框里输入内容，并且离开这个输入框（比如按下回车或者点击其他地方）时，就会触发这个事件。 ### 第二步：添加`onchange`处理程序 接下来，我们要给这个输入字段添加一个`onchange`处理程序。这个处理程序的作用是，当用户输入内容并离开输入框时，我们会捕捉到这个事件，并且更新一个叫做`greeting`的属性。 ### 第三步：更新`greeting`属性 在`onchange`处理程序中，我们要更新`greeting`属性。这个属性是用来存储用户输入的内容的。我们可以通过事件对象来获取用户输入的值。事件对象是一个包含了所有关于这个事件信息的对象，比如用户输入了什么内容。 ### 第四步：从事件对象中提取值 在事件处理程序中，我们可以通过`event.target`来获取用户输入的值。`event.target`就是触发这个事件的输入框本身。我们可以通过`event.target.value`来获取用户输入的具体内容。 ### 总结 所以，整个过程是这样的： 1. 用户在输入框中输入内容。 2. 用户离开输入框时，触发`onchange`事件。 3. 在`onchange`处理程序中，我们通过`event.target.value`获取用户输入的内容。 4. 然后，我们把这个值赋给`greeting`属性，这样页面上其他地方显示的问候语就会实时更新了。 是不是很简单？这就是双向数据绑定的基本概念。用户输入的内容会实时反映在页面上，这就是我们常说的“双向绑定”。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 18

  Using Expressions

  第 26 页

  让我们来一步步理解这段代码。首先，这是一个使用Lightning Web Components (LWC) 构建的简单Salesforce组件。LWC是Salesforce提供的一种现代框架，用于构建高性能的Web组件。 ### 1. 导入和类定义 ```javascript import { LightningElement } from &#39;lwc&#39;; export default class HelloWebComponent extends LightningElement { ``` - 这里我们首先从`lwc`模块中导入了`LightningElement`，这是所有LWC组件的基类。 - 然后我们定义了一个名为`HelloWebComponent`的类，并让它继承自`LightningElement`。 ### 2. 定义属性 ```javascript greeting = &#39;开拓者&#39;; ``` - 我们定义了一个名为`greeting`的属性，并给它赋了一个初始值`&#39;开拓者&#39;`。这个属性将用于存储用户的问候语。 ### 3. 处理输入变化 ```javascript handleGreetingChange(event) { this.greeting = event.target.value; } ``` - 这是一个事件处理函数，当用户在输入框中输入内容时，这个函数会被调用。 - `event.target.value`获取输入框中的当前值，并将其赋值给`greeting`属性。 ### 4. 获取当前日期 ```javascript currentDate = new Date().toDateString(); ``` - 这里我们定义了一个`currentDate`属性，并使用`new Date().toDateString()`获取当前日期的字符串表示。 ### 5. 计算属性（Getter） ```javascript get capitalizedGreeting() { return `Hello ${this.greeting.toUpperCase()}!`; } ``` - 这是一个计算属性（Getter），它返回一个大写的问候语。 - `this.greeting.toUpperCase()`将`greeting`属性的值转换为大写，并拼接成`Hello [大写问候语]!`的格式。 ### 6. HTML模板 ```html <div class="slds-m-around_medium"> <p>今天是{currentDate}</p> </div> ``` - ``标签定义了组件的HTML结构。 - ``是一个Salesforce提供的UI组件，用于显示卡片内容。`title`属性绑定了`capitalizedGreeting`，`icon-name`指定了卡片的图标。 - `<div>`标签包含了一个段落`<p>`，显示当前日期`{currentDate}`。 - ``是一个输入框组件，`label`属性设置了输入框的标签，`value`属性绑定了`greeting`，`onchange`事件绑定了`handleGreetingChange`函数。 ### 7. 总结 - 这个组件展示了一个简单的问候语输入框，用户可以输入问候语，组件会实时显示大写的问候语和当前日期。 - 我们使用了`getter`来计算并返回大写的问候语，这样可以避免在HTML中直接编写复杂的逻辑。 希望这个解释能帮助你更好地理解这段代码！如果有任何问题，随时问我哦！</p></div>

  ▶ 播放视频 查看详情
• 19

  Disabling and Clearing Lightning Component Cache

  第 27 页

  同学们，今天我们来聊聊在Salesforce中如何禁用和清除Lightning组件的缓存。这个问题听起来可能有点技术性，但其实很简单，我会用最直接的方式来解释。 首先，为什么要禁用缓存呢？想象一下，你在厨房里做菜，每次你尝试新的调料或烹饪方法，你希望立即尝到最新的味道，而不是之前的老味道。同样地，当你在开发或测试Lightning组件时，你希望浏览器加载的是你最新修改的代码，而不是之前缓存的老版本。如果不禁用缓存，浏览器可能会加载旧的代码，这样你就无法准确测试你的最新更改了。 那么，我们怎么禁用和清除这个缓存呢？主要有两种方法： 第一种方法是在会话设置中为所有用户禁用缓存。这就像是在厨房里设置一个规则，告诉所有人每次做菜都要用最新的调料，不能再用旧的。这样，无论谁在测试，都能确保使用的是最新的代码。 第二种方法是在每个用户的基础上使用测试模式启用手动禁止使用缓存。这就像是你自己决定每次做菜前都要检查一下调料是否最新，确保每次都能尝到最新的味道。这种方法更灵活，适合在特定情况下使用。 总之，禁用和清除Lightning组件的缓存是确保你在浏览器中测试的代码是最新版本的关键步骤。希望这个解释能帮助大家更好地理解这个过程。如果有任何疑问，随时提问哦！

  ▶ 播放视频 查看详情
• 20

  Using Lightning App Builder

  第 28 页

  让我们来聊聊如何使用Lightning App Builder来创建一个名为helloWebComponent的组件，并把它添加到你的Salesforce主页上。 首先，Lightning App Builder是一个非常直观的工具，它允许你通过简单的拖放操作来设计和定制你的Salesforce页面。即使你不是一个技术专家，也可以轻松使用它来创建单页应用程序，或者定制你的Lightning Experience主页和记录页面。 现在，我们来谈谈如何创建和添加helloWebComponent。这个组件一旦创建并配置好，就会出现在Lightning App Builder左侧的自定义组件列表中。你只需要把它从列表中拖到页面的画布上，就可以把它添加到你的主页上了。 Lightning页面是介于传统的页面布局和Visualforce页面之间的一个选项。与页面布局类似，Lightning页面允许你向页面添加自定义的项目。不过，这些项目不是普通的字段或Visualforce组件，而是更加灵活和强大的Lightning组件。 通过使用Lightning App Builder，你可以轻松地创建和定制你的Salesforce页面，使其更加符合你的业务需求。希望这个简单的介绍能帮助你更好地理解如何使用Lightning App Builder来增强你的Salesforce体验。

  ▶ 播放视频 查看详情
• 21

  Creating a Hello World Component

  第 29 页

  同学们，今天我们来学习如何在Salesforce中创建一个简单的“Hello World”组件。这个组件会显示当前的时间，并且允许用户通过输入框来调整问候语。我们还会使用一个闪电卡来展示这些信息。 首先，我们需要创建一个新的Lightning Web Component。你可以把它想象成一个小的、独立的网页部件，可以在Salesforce的页面上使用。 1. ，创建组件，： 打开你的Salesforce开发者控制台，创建一个新的Lightning Web Component，命名为“HelloWorld”。 2. ，添加私有属性，： 在组件的JavaScript文件中，我们会添加一个私有属性来存储当前的时间。这个属性是私有的，意味着它只能在组件内部使用。我们可以使用JavaScript的`Date`对象来获取当前时间。 ```javascript import { LightningElement, track } from &#39;lwc&#39;; export default class HelloWorld extends LightningElement { @track currentTime = new Date().toLocaleTimeString(); } ``` 3. ，显示双向绑定的输入框，： 接下来，我们会在HTML文件中添加一个`lightning-input`组件。这个输入框会与一个属性进行双向绑定，也就是说，当用户在输入框中输入内容时，这个属性的值也会随之改变。 ```html ``` 在JavaScript文件中，我们需要定义这个属性和处理输入变化的方法： ```javascript import { LightningElement, track } from &#39;lwc&#39;; export default class HelloWorld extends LightningElement { @track greeting = &#39;Hello World&#39;; @track currentTime = new Date().toLocaleTimeString(); handleInputChange(event) { this.greeting = event.target.value; } } ``` 4. ，使用Getter填充闪电卡标题，： 最后，我们会使用一个`lightning-card`来展示我们的问候语和时间。卡片的标题会通过一个getter方法来动态生成。 ```html <p>{greeting}</p> <p>Current Time: {currentTime}</p> ``` 在JavaScript文件中，我们添加这个getter方法： ```javascript import { LightningElement, track } from &#39;lwc&#39;; export default class HelloWorld extends LightningElement { @track greeting = &#39;Hello World&#39;; @track currentTime = new Date().toLocaleTimeString(); handleInputChange(event) { this.greeting = event.target.value; } get cardTitle() { return `Greeting: ${this.greeting}`; } } ``` 好了，现在你已经创建了一个简单的“Hello World”组件，它会显示当前时间，并且允许用户通过输入框来调整问候语。希望这个练习能帮助你更好地理解如何在Salesforce中创建和使用Lightning Web Components。如果有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 22

  Create a Hello World Lightning Web Component - 30

  第 30 页

  让我们一步一步来创建一个“Hello World”的Lightning Web组件。这个过程其实很简单，我会尽量用通俗易懂的语言来解释。 首先，你需要打开一个特定的网页，网址是https://sfdc.co/bVfBqZ。这个网页会带你进入一个教程，教你如何创建Lightning Web组件。在这个网页上，你会看到一个部分叫做“使用静态HTML创建Hello World Lightning Web组件”。这就是我们要关注的部分。 现在，假设你已经打开了DEX 470文件夹，所以你可以跳过那些让你打开build-apps-with-lwc文件夹的说明。直接进入创建组件的步骤。 在这个步骤中，你将使用一些简单的HTML代码来创建一个显示“Hello World”的组件。这个HTML代码非常基础，就是用来在页面上显示“Hello World”这几个字。 完成这个步骤后，你需要确认一下你是否成功创建了这个组件。如果一切顺利，你就可以进行下一步了。下一步是将你做的这些更改提交到你的本地存储库。这就像是保存你的工作，确保你以后可以随时回来查看或修改。 当你完成所有这些步骤后，你会看到一个消息，告诉你“已完成第1步：Hello World”。这意味着你已经成功创建了一个简单的Lightning Web组件，并且已经保存了你的工作。 接下来，你可以继续探索如何使用这个组件，比如如何将它添加到你的应用程序界面中，或者如何使用数据绑定和表达式来使你的组件更加动态和有用。 希望这个解释对你有帮助，如果你有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 23

  Exercise Solutions

  第 31 页

  同学们，今天我们来聊聊运动解决方案31。这个方案其实是一个很实用的工具，特别是在你处理一些复杂的运动数据或者需要优化运动计划的时候。 首先，你可以在你的存储库中找到这个锻炼解决方案。存储库就像是一个大仓库，里面存放了很多有用的工具和资源。你只需要进去找一找，就能找到这个运动方案。 这个运动方案里面包含了很多具体的练习解决方案。这些方案都是经过精心设计的，可以帮助你更好地完成你的运动目标。比如说，如果你想要提高耐力，方案里会有一些专门的练习来帮助你达到这个目标。 所以，当你需要一些运动方面的帮助时，不妨去你的存储库里找找这个运动解决方案31。它可能会给你带来意想不到的收获哦！ 好了，今天的讲解就到这里。希望你们能好好利用这个运动方案，达到你们的运动目标。加油！

  ▶ 播放视频 查看详情
• 24

  Find the Syntax Error and Fill in the Blank

  第 32 页

  让我们一起来看一下这个Salesforce的代码片段，看看哪里可能有问题，以及如何填写空白。 首先，我们来看一下这个代码片段： ``` 值={问候} onchange = {Change} ``` ### 1. 查找语法错误 - ，值={问候}，：这里的“值”看起来像是中文，但在Salesforce中，通常我们会使用英文的“value”来表示字段的值。所以这里可能是“value={问候}”。 - ，onchange = {Change}，：这里的“onchange”是正确的，表示当字段值发生变化时触发的事件。但是，事件处理函数通常是小写的，所以“Change”应该改为“change”。 ### 2. 填写空白 假设我们要在Salesforce中创建一个字段，并且希望在字段值发生变化时触发一个事件。我们可以这样写： ```javascript value={问候} onchange={change} ``` ### 3. 解释 - ，value={问候}，：这里的“value”表示字段的当前值，而“{问候}”是一个变量，表示字段的值。 - ，onchange={change}，：这里的“onchange”是一个事件监听器，当字段的值发生变化时，会调用“change”函数。 ### 4. 总结 所以，修正后的代码应该是： ```javascript value={问候} onchange={change} ``` 这样，当字段的值发生变化时，就会触发“change”函数，执行相应的操作。 希望这个解释对你有帮助！如果还有其他问题，随时问我哦！

  ▶ 播放视频 查看详情