【Salesforce】 LWC框架文档 （入门介绍及教程）#长文预警 |
您所在的位置：网站首页 › lwc什么手表 › 【Salesforce】 LWC框架文档 （入门介绍及教程）#长文预警 |
【Salesforce】 LWC框架文档 （入门介绍及教程）#长文预警
|
LWC（Lightning Web Component）入门介绍及教程
文章目录
LWC（Lightning Web Component）入门介绍及教程
Salesforce Lightning Experience
Lightning Web Components
创建LWC组件
LWC的命名规则
LWC文件结构
HTML文件
JS文件
组件配置文件
CSS文件
部署组件
Hello World
HTML模板特性
数据绑定
JS类中属性的绑定
`lightning-input`字段使用`onchange`属性来监听其值的变化。
使用`getter`方法渲染表达式值。
条件性渲染DOM元素
渲染列表
`for:each`指令
`iterator`指令
CSS
组件构成
构成概念
给子组件传递属性
数据流
对象值只读
使用原始值
调用子组件的方法
在子组件中定义方法
在父组件中调用子组件方法
组件的生命周期
流程
插入DOM
从DOM中移除
`connectedCallback()`和`disconnectedCallback()`
`renderedCallback()` 方法
通过事件进行容器间交流
创建并派发事件
处理事件
声明式监听
编码式监听
组件间交流
与Salesforce数据协作
数据指南
基于LDS的基础组件
数据表（datatable）
线程服务(Wire Service)
线程服务语法
将参数字段声明为响应式
用`@wire`装饰属性
用`@wire`装饰方法
调用Apex方法
导入Apex方法
将Apex方法暴露给LWC组件
将Apex方法作为线程服务提供给组件
强制调用Apex方法
刷新客户端缓存
在强制调用方法中刷新缓存
在线程服务中刷新缓存
刷新属性值
刷新方法
参考链接
Salesforce Lightning Experience
为了适应多端以及现代化Web应用，Salesforce在2015年推出了全新的Lightning Experience用户界面。 目前为止，Salesforce的用户界面分为两种： Salesforce Classic Visualforce Pages Salesforce Lightning Experience Lightning Web Components Aura Components Visualforce Pages
Lightning Web Components是使用HTML和现代JavaScript构建的自定义HTML元素UI框架。LWC使用核心Web组件（Web Components by WICG) 标准，提供在Salesforce支持的浏览器中表现良好所需的内容。因为LWC建立在浏览器中原生运行的代码上，因此它是轻量级、拥有卓越的性能的。所需要编写的代码大部分都是标准的JavaScript及HTML代码。 创建LWC组件目前只能在VSCode等IDE中编写LWC组件（Developer Console中无法创建、查看、编辑） 使用Salesforce Cli的命令Create Ligthing Web Component, 输入组件名之后，本地会生成一个文件夹即新建的LWC组件。 LWC的命名规则 必须以小写字母开头 必须只包含字母数字或下划线字符 在命名空间中必须是唯一的 不能包括空白处 不能以下划线结尾 不能包含两个连续的下划线 不能包含连字符（破折号）。 LWC文件结构 myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml ├──myComponent.css └──myComponent.svg HTML文件在HTML文件中引用其他组件： JS文件 import { LightningElement } from 'lwc'; export default class MyComponent extends LightningElement { }lwc 模组是LWC的核心模组，import 声明将 LightningElement 导入到组件中。 LightningElement 是一个标准HTML元素的自定义包装器 在JavaScript等编程语言中，包装器是一个旨在调用一个或多个其他函数的函数，有时纯粹是为了方便，有时在这个过程中对它们进行调整，以完成一个稍微不同的任务。 JS文件中，主要包含以下内容： 该组件通过@api注解方法和属性的公用API。 事件处理逻辑 私有变量 组件配置文件想要在页面上使用LWC组件，最简单的配置内容为： 50.0 true lightning__AppPage lightning__RecordPage lightning__HomePage CSS文件用Cli命令创建的LWC组件中默认没有CSS文件，需要手动创建同名CSS文件。例如组件名为 myComponent，则CSS文件需命名为myComponent.css 部署组件在VSCode中使用Cli命令Deploy Source To Org， 然后在需要组件的对象详细页面中编辑页面，拖拽组件并保存。 Hello World接下来我们尝试一下新建一个最简单的Hello World组件，并将它显示在记录页面上。 HTML: JS: import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement { }XML: 52.0 true lightning__AppPage lightning__RecordPage lightning__HomePage HTML模板特性在LWC的HTML文件中，所有组件内容都包含在标签内。本节介绍一些基础用法。 数据绑定 JS类中属性的绑定 Hello, {greeting}! import { LightningElement } from 'lwc'; export default class Hello extends LightningElement { greeting = 'World'; }{}内部可以是JS标识符或成员表达式，例如{data}, {data.name} lightning-input字段使用onchange属性来监听其值的变化。 Hello, {greeting}! // helloBinding.js import { LightningElement } from 'lwc'; export default class HelloBinding extends LightningElement { greeting = 'World'; handleChange(event) { this.greeting = event.target.value; } } 使用getter方法渲染表达式值。 Uppercased Full Name: {uppercasedFullName} // helloExpressions.js import { LightningElement } from 'lwc'; export default class HelloExpressions extends LightningElement { firstName = ''; lastName = ''; handleChange(event) { const field = event.target.name; if (field === 'firstName') { this.firstName = event.target.value; } else if (field === 'lastName') { this.lastName = event.target.value; } } get uppercasedFullName() { return `${ this.firstName} ${ this.lastName}`.toUpperCase(); } } 条件性渲染DOM元素指令if:true|false={property} 根据变量property的布尔值决定删除或是插入DOM元素。 These are the details! // helloConditionalRendering.js import { LightningElement } from 'lwc'; export default class HelloConditionalRendering extends LightningElement { areDetailsVisible = false; handleChange(event) { this.areDetailsVisible = event.target.checked; } }在JS代码中，我们并没有任何操作DOM元素的举动，只是改变了areDetailsVisible的值，LWC框架替我们操纵DOM元素。 渲染列表 for:each指令使用指令for:each循环渲染一个列表。for:item="currentItem" 指令提示当前循环到的元素。for:index="index"指令提示当前循环的索引。在循环到的元素中，我们需要用key={uniqueId}给其一个唯一的键。 |
【本文地址】
今日新闻 |
推荐新闻 |