Ionic 4 组件的 "property" 与 "attribute" 有什么区别？
What's the difference between an Ionic 4 component's "property" vs "attribute"?
https://ionicframework.com/docs/api/col
对于列宽，它表示 sizeLg 是 属性 和 size-lg 是属性。我使用哪个，为什么？什么时候？
这个：
<ion-col size-lg="6"></ion-col>
或者这样：
<ion-col sizeLg="6"></ion-col>
或者这样：
<ion-col [size-lg]="6"></ion-col>
或者这样：
<ion-col [sizeLg]="6"></ion-col>
...所有这些看起来都是我可以做的事情，但我不确定为什么以及何时需要，而且文档中也不清楚。
在 Ionic 的上下文中，为什么 sizeLg 是一个 属性 而 size-lg 是一个属性，有什么含义？
这个
<ion-col size-lg="6"></ion-col>
和
<ion-col sizeLg="6"></ion-col>
两者相同，但在 Ionic 4 中它们引入了这种 sizeLg 语法，因为它是变量名称的 javascript 标准
.
我推荐使用这种方式
<ion-col sizeLg="6"></ion-col>
和
<ion-col [size-lg]="6"></ion-col>
<ion-col [sizeLg]="6"></ion-col>
当=后面的东西是代码中的变量时使用。
我不知道 Ionic 4 文档与其 pre-release 状态相比改进了多少，但你的问题实际上触及了底层 Stencil 构建器及其设计的行为，特别是 non-Angular 用法，即作为裸 Web 组件。
一个简单的回答是：属性直接反映属性，概括了 Angular 属性绑定，因此即使在 Angular.
之外它也以非常相似的方式工作
因此，如果您在 Angular 中使用 Ionic 4，所有 4 种语法都应该有效（即功能等效），[sizeLg]="6" 可能是最熟悉的形式。
Stencil 是支持 Ionic 4 的构建工具，将其编译为 Web 组件（自定义元素）。在 Stencil 中，您以 Angular/React 的某种混合方式设计您的组件，并且编译器将您所有的 Input 属性转换为 JS 属性和 HTML 属性，模仿其他标准 [=] 的 API 34=] 元素。想想一个 <input type="checkbox"> 元素和它的 checked 属性，它也是一个 read/write JS 属性（你可以做 document.querySelector("input").checked = true）。
Stencil 为其输出 Web 组件执行此操作，将所有公开的 JS 输入属性（通常以驼峰式命名）反映为 HTML 属性（以其等效的 snake-case 类型），以便您可以定义输入两种方式中的任何一种，例如标准 HTML 元素，即使您不使用 Angular.
但是有了这个，在 Angular（当然还有非方括号形式）中使用它时，您将被限制为 [size-lg]="6"。所以 Ionic 添加了一个 Angular 包装器，告诉 Angular 有一个底层 @Input() sizeLg 属性，现在你可以使用更多 Angular 样式 [sizeLg]="6"表格。
https://ionicframework.com/docs/api/col
对于列宽，它表示 sizeLg 是 属性 和 size-lg 是属性。我使用哪个，为什么？什么时候？
这个：
<ion-col size-lg="6"></ion-col>
或者这样：
<ion-col sizeLg="6"></ion-col>
或者这样：
<ion-col [size-lg]="6"></ion-col>
或者这样：
<ion-col [sizeLg]="6"></ion-col>
...所有这些看起来都是我可以做的事情，但我不确定为什么以及何时需要，而且文档中也不清楚。
在 Ionic 的上下文中，为什么 sizeLg 是一个 属性 而 size-lg 是一个属性，有什么含义？
这个
<ion-col size-lg="6"></ion-col>
和
<ion-col sizeLg="6"></ion-col>
两者相同，但在 Ionic 4 中它们引入了这种 sizeLg 语法，因为它是变量名称的 javascript 标准
.
我推荐使用这种方式
<ion-col sizeLg="6"></ion-col>
和
<ion-col [size-lg]="6"></ion-col>
<ion-col [sizeLg]="6"></ion-col>
当=后面的东西是代码中的变量时使用。
我不知道 Ionic 4 文档与其 pre-release 状态相比改进了多少，但你的问题实际上触及了底层 Stencil 构建器及其设计的行为，特别是 non-Angular 用法，即作为裸 Web 组件。
一个简单的回答是：属性直接反映属性，概括了 Angular 属性绑定，因此即使在 Angular.
之外它也以非常相似的方式工作因此，如果您在 Angular 中使用 Ionic 4，所有 4 种语法都应该有效（即功能等效），[sizeLg]="6" 可能是最熟悉的形式。
Stencil 是支持 Ionic 4 的构建工具，将其编译为 Web 组件（自定义元素）。在 Stencil 中，您以 Angular/React 的某种混合方式设计您的组件，并且编译器将您所有的 Input 属性转换为 JS 属性和 HTML 属性，模仿其他标准 [=] 的 API 34=] 元素。想想一个 <input type="checkbox"> 元素和它的 checked 属性，它也是一个 read/write JS 属性（你可以做 document.querySelector("input").checked = true）。
Stencil 为其输出 Web 组件执行此操作，将所有公开的 JS 输入属性（通常以驼峰式命名）反映为 HTML 属性（以其等效的 snake-case 类型），以便您可以定义输入两种方式中的任何一种，例如标准 HTML 元素，即使您不使用 Angular.
但是有了这个，在 Angular（当然还有非方括号形式）中使用它时，您将被限制为 [size-lg]="6"。所以 Ionic 添加了一个 Angular 包装器，告诉 Angular 有一个底层 @Input() sizeLg 属性，现在你可以使用更多 Angular 样式 [sizeLg]="6"表格。