今年在做lightning項目的時候，突然component-library默認是lwc的標籤，於是好奇的開始lwc的學習之路，以此來做筆記。
可以在這邊學習哦：https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
1.下載安裝Command Line Interface (CLI)
| Operating System | Link to Installer |
|---|---|
| macOS | https://sfdc.co/sfdx_cli_osx |
| Windows 32-bit | https://sfdc.co/sfdx_cli_win |
| Windows 64-bit | https://sfdc.co/sfdx_cli_win64 |
| Debian/Ubuntu 64 | https://sfdc.co/sfdx_cli_linux Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
| Debian/Ubuntu x86 | https://sfdc.co/sfdx_cli_linux_x86 Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
2.安裝Visual Studio Code
https://code.visualstudio.com/
3.創建項目
在軟件快捷鍵Ctrl+shift+P,打開搜索器：
輸入：SFDX
選擇：SFDX: Create Project.
然後輸入項目名稱，回車確定
選擇文件夾本地保存
點擊Create Project
然後繼續Ctrl+shift+P,打開搜索器：
輸入SFDX: Authorize an Org
然後輸入項目默認登陸URL，登陸確認
繼續打開搜索器：輸入SFDX: Create Lightning Web Component.
回車選擇默認force-app/main/default/lwc.
輸入component名稱,回車確認，項目創建成功！
如圖：
右鍵項目選擇SFDX: Deploy Source to Org 上傳到org服務器
之後可以在app builder中拖出lwc放到頁面上如圖：
4 部分代碼解析：
// import module elements
import { LightningElement, track } from 'lwc';
// declare class to expose the component
export default class App extends LightningElement {
// add decorator
@track
ready = false;
// use lifecycle hook
connectedCallback() {
setTimeout(() => {
this.ready = true;
}, 3000);
}
}
- @api: Marks a property as public for use in your template or other components.
- @track: Marks a property for internal monitoring. A template or function using this property forces a component to rerender when the property’s value changes. Use this to store values locally, especially as a user interacts with your component.
- @wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org.
一個屬性只能選擇@api或@track其中一個，不能兩者都有。