进入本篇以前，我们先了解一下命名规范，salesforce建议lwc的组件使用驼峰方式并且首字母小写，比如：*helloBinding* 我们先以一个demo进入本篇学习：

helloBinding.html

<template>
    <div class="slds-m-around_medium">
        <lightning-input name='firstName' label="First Name" value={firstName} onchange={handleChange}></lightning-input>
        <lightning-input name='lastName' label="Last Name" value={lastName} onchange={handleChange}></lightning-input>
        <p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>
    </div>
</template>

helloBinding.js

// helloBinding.js
import { LightningElement } from 'lwc';

export default class HelloBinding 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();
    }
}

效果显示：当输入了 first以及last信息以后，下方显示了大写的 FIRST NAME

Untitled

我们看到当前的html最上方以template最为起始和终止部分。基于UI角度，当这个组件显示在UI上，DOM会以指定格式插入到DOM中，以 (c-) + 组件名，组件驼峰如果大写的，前面添加破折号(-)然后大写变成小写。

Untitled

除html要求外，js也需要引入LightningElement以及js extends LightningElement从而遵循lwc框架规则以及封装的功能。lwc大部分js采用es6，更多的标准功能，更少的自定义，所以想要深入学习lwc可以后续深入研究 es6 js.

一. 数据绑定

数据绑定基础

在 html的template中，使用花括号{}进行变量的绑定。为了计算该属性的值，在JavaScript类中使用一个JavaScript getter方式，可以参考上述demo中的uppercasedFullName。在模板中，属性可以是一个JavaScript标识符（例如，person）或者通过点的方式获取一个对象中的属性，比如（person.firstName）。变量声明也建议首字母小写并且驼峰方式。

LWC不允许像person[2].name['John']这样的计算表达式。

花括号中绑定的变量不允许包含空格，比如 { uppercasedFullName }就不是合法的变量绑定

花括号内容仅允许变量，不允许表达式，如果布尔类型结果需要在js端处理完成绑定在前台。比如 {test > 0}这种是不合法的声明

一个变量可以拆分成 getter和setter两部分，比如uppercasedFullName 可以拆分成以下的两部分从而可以更灵活的设置。

get uppercasedFullName() {
}
set uppercasedFullName(value) {
}

除了正常声明变量，还可以基于标签方式标注变量，目前lwc有两种：track & api

track & api注解