Aurelia 组件
组件是 Aurelia 框架的主要构建块。在本章中，您将学习如何创建简单的组件。
简单组件
如上一章所述，每个组件都包含用
JavaScript 编写的
view-model 和用
编写的 view >HTML。您可以看到以下
view-model 定义。这是一个
ES6 示例，但您也可以使用
TypeScript。
app.js
export class MyComponent {
header = "this is Header";
content = "this is content";
}
我们可以将我们的值绑定到视图，如下例所示。
${header} 语法将从
MyComponent 绑定定义的
header 值。相同的概念适用于
内容。
app.html
<template>
<h1>${header}</h1>
<p>${content}</p>
</template>
以上代码将产生以下输出。
组件功能
如果您想在用户单击按钮时更新页眉和页脚，可以使用以下示例。这次我们在
EC6 类构造函数中定义了
header 和
footer。
app.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() 函数与按钮连接起来。在我们后续的一章中详细介绍了这一点。
app.html
<template>
<h1>${header}</h1>
<p>${content}</p>
<button click.delegate = "updateContent()">Update Content</button>
</template>
当按钮被点击时，标题和内容将被更新。
