Lightning 웹 구성 요소 - 더 많은 JavaScript!

어서 오세요!

이것은 이전 블로그의 연장이다.
마지막 부분에서, 우리는 우리의 구성 요소를 더욱 보기 좋게 하고, 자바스크립트를 추가했다.
이 섹션에서는 다른 단순 어셈블리를 구성하여 더 많은 JavaScript를 패치합니다.우리는 두 개의 입력을 받아들여 기본적인 산술 연산을 실행하고 결과를 보여 주는 계산기를 구축할 것이다.

짓기 시작합시다.

당신의 VS 코드를 시작합니다.best friend 명령 팔레트를 호출하고 명령을 입력하여 새 lwc를 만듭니다.
또는 VScode의 파일 자원 관리자의'lwc'폴더를 마우스 오른쪽 버튼으로 클릭하고'Lightning 웹 구성 요소 만들기'명령을 선택할 수 있습니다.

이제 구성 요소를 명명합시다. 간단한 구성 요소가 될 것이라고 말했기 때문에, 단순 Calculator라고 명명합니다.알아요, 창의적이에요.

우리는 before와 같은 절차를 따를 것이다.두 개의 입력 요소를 수용할 수 있는 카드를 용기에 추가한 다음, 출력을 표시하기 위해 다른 요소를 추가합시다.SLD를 어떻게 사용하는지 이미 알고 있는 이상, 우리도 그것을 그룹에 추가할 것이다.

<template>
    <lightning-card title="Simple Calculator" icon-name="utility:advanced_function" class="slds-text-align_center">
        <div class="slds-p-around_medium">
            <lightning-input type="number" name="firstNum" value={firstNumber} placeholder="First Number" onchange={handleFirstNum}></lightning-input>
            <lightning-input type="number" name="secondNum" value={secondNumber} placeholder="Second Number" onchange={handleSecondNum}></lightning-input>
            <lightning-input type="text" name="result" value={result} placeholder="Result" readonly></lightning-input>
        </div>
    </lightning-card> 
</template>

우리가 그것을 우리 조직에 보존하고 배치한 후에 우리는 이와 같은 내용을 볼 수 있어야 한다.

이제 수학 연산을 실행하기 위해 단추를 추가합시다.우리는 사용자에게 두 개의 숫자의 덧셈, 뺄셈, 곱셈, 나눗셈 옵션을 제공할 것이다.
앞에서 <div> 탭을 끝낸 후, 단추를 고정시키기 위해 다른 탭을 추가합니다.

        <div class="slds-grid slds-p-around_medium">
            <lightning-button label="Add" icon-name="utility:add" size="small" onclick={handleAdd} class="slds-col"></lightning-button>
            <lightning-button label="Subtract" icon-name="utility:dash" size="small" onclick={handleSub} class="slds-col"></lightning-button>
            <lightning-button label="Multiply" icon-name="utility:close" size="small" onclick={handleMul} class="slds-col"></lightning-button>
            <lightning-button label="Divide" icon-name="utility:percent" size="small" onclick={handleDiv} class="slds-col"></lightning-button>
        </div>

그리고 우리가 격자를 사용하고 있다는 것을 알아차렸습니까?lwchere에서 격자를 어떻게 사용하는지 더 많은 정보를 읽을 수 있습니다.
이것은 반드시 우리의 구성 요소를 이렇게 보게 해야 한다.

이제 사용자 인터페이스가 좋아 보입니다. JavaScript를 사용하여 작업을 시작하겠습니다.

우선, 우리는 변수를 성명해야 한다.변수라면 이제 장식자에 대해 논의할 때다.
Lightning Web Components 모형에는 3개의 장식기가 있는데 이 3개의 장식기는 LWC만의 것이다.

"@api"- 공공재산은 수동적입니다.공통 속성 값이 변경되면 어셈블리가 다시 렌더링됩니다.공공 속성이나 방법을 공개하려면 @api를 사용하십시오.

육상장은 반응적이다.필드의 값이 변경되고 템플릿이나 템플릿에 사용되는 속성 가져오기 프로그램에서 해당 필드가 사용되는 경우 어셈블리가 다시 렌더링되고 새 값이 표시됩니다.

"@wire"- Salesforce 데이터를 읽기 위해 Lightning 웹 구성 요소는 반응식 유선 서비스를 사용합니다.wire 서비스가 데이터를 제공할 때 구성 요소가 다시 나타납니다.

그들에 대한 정보를 더 많이 알 수 있다here.
성명 변수로 돌아갑시다.우리는 보통 '@track' decorator를 사용하여 성명을 하지만, 새 버전에서는 그럴 필요가 없습니다.다른 decorator를 지정하지 않으면, 우리가 설명한 모든 변수는 기본적으로 decorator를 추적합니다.

import { LightningElement } from 'lwc';

export default class SimpleCalculator extends LightningElement {
    firstNumber;
    secondNumber;
    result;

handleFirstNum(event) {
        this.firstNumber = event.target.value;
    }

    handleSecondNum(event) {
        this.secondNumber = event.target.value;
    }

우리는 변수를 설명하고 두 개의 입력을 처리하는 두 가지 방법을 추가했다.
덧셈 조작을 처리하는 방법을 추가합시다.

handleAdd() {
        this.result = `The result of ${this.firstNumber} + ${this.secondNumber} is: ${parseFloat(this.firstNumber) + parseFloat(this.secondNumber)}`;
}

그러니까 가능해.퉤.
다른 세 가지 조작에도 똑같은 일을 합시다.

handleSub() {
        this.result = `The result of ${this.firstNumber} - ${this.secondNumber} is: ${parseFloat(this.firstNumber) - parseFloat(this.secondNumber)}`;
    }

    handleMul() {
        this.result = `The result of ${this.firstNumber} * ${this.secondNumber} is: ${parseFloat(this.firstNumber) * parseFloat(this.secondNumber)}`;
    }

    handleDiv() {
        if(this.secondNumber > 0) {
            this.result = `The result of ${this.firstNumber} / ${this.secondNumber} is: ${parseFloat(this.firstNumber) / parseFloat(this.secondNumber)}`;
        }
        else {
            this.result = "Invalid Input";
        }   
    }

이것이 효과가 있는지 봅시다.

그것은 확실히 효과가 있다.
이 블로그를 끝내기 전에 기능을 하나 더 추가합시다.지우기 단추를 만들 것입니다. 분명히 이 단추는 모든 값을 지울 것입니다.
먼저 UI에 버튼을 추가합니다.단추 요소에variant라는 새로운 속성을 도입하고 'brand' 값을 지정했습니다.이게 버튼에 어떤 영향을 미치는지 봅시다.

<div class="slds-grid slds-p-around_medium">
   <lightning-button class="slds-col" variant="brand" label="Clear" onclick={handleclear} ></lightning-button>
</div>

Clear 버튼을 처리하는 방법도 추가합니다.

handleclear() {
        this.firstNumber = '';
        this.secondNumber = '';
        this.result = '';
    }

지우기 버튼을 누르면 모든 값이 지워집니다.아니면, 그럴까요?
새로운 변경 사항을 조직에 배치하고 변경 사항을 살펴봅시다.

변수 속성이 어떻게 단추를 바꾸는지 아십니까?자세한 내용은 Components Library에서 확인할 수 있습니다.
이 섹션을 요약하면 간단한 계산기 구성 요소를 위한 UI는 카드 한 장, 입력 필드 몇 개, 버튼으로 구성됩니다.그런 다음 JavaScript를 사용하여 구성 요소가 예상대로 작동합니다.
다음 부분에서 우리는 원소를 조건부로 과장하는 방법과 수조에 관한 지식을 배울 것이다.
만약 당신이 이것을 좋아한다면, 이 시리즈를 주목해 주십시오.
와줘서 고마워요.D