Aurelia - 组件

组件是 Aurelia 框架的主要构建块。在本章中，您将学习如何创建简单的组件。

简单组件

正如上一章已经讨论的，每个组件都包含用JavaScript编写的视图模型和用HTML编写的视图。您可以看到以下视图模型定义。这是一个ES6示例，但您也可以使用TypeScript。

应用程序.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

我们可以将我们的值绑定到视图，如以下示例所示。${header}语法将绑定MyComponent中定义的标头值。同样的概念也适用于内容。

应用程序.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

上面的代码将产生以下输出。

Aurelia 组件简单

组件功能

如果您想在用户单击按钮时更新页眉和页脚，可以使用以下示例。这次我们在EC6类构造函数中定义页眉和页脚。

应用程序.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

我们可以添加click.delegate()将updateContent()函数与按钮连接起来。我们将在后续章节中详细介绍这一点。

应用程序.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

单击该按钮时，标题和内容将更新。

Aurelia 成分法