【Salesforce】 LWC框架文档 (入门介绍及教程)#长文预警 |
您所在的位置:网站首页 › aura的中文意思 › 【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 ComponentsLightning 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元素。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |