组件(Components)
优质
小牛编辑
139浏览
2023-12-01
组件是Aurelia框架的主要构建块。 在本章中,您将学习如何创建简单的组件。
简单组件
正如前一章中已经讨论过的,每个组件都包含用JavaScript编写的view-model和用HTML编写的view 。 您可以看到以下view-model定义。 这是一个ES6示例,但您也可以使用TypeScript 。
app.js
export class MyComponent {
header = "This is Header";
content = "This is content";
}
我们可以将值绑定到视图,如以下示例所示。 ${header}语法将绑定MyComponent定义的header值。 对content应用相同的概念。
app.html
<template>
<h1>${header}</h1>
<p>${content}</p>
</template>
上面的代码将产生以下输出。
组件功能 (Component Functions)
如果要在用户单击按钮时更新页眉和页脚,可以使用以下示例。 这次我们在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>
单击该按钮时,标题和内容将更新。