Aurelia教程

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>
以上代码将产生以下输出。
Aurelia 组件简单

组件功能

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

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>
当按钮被点击时,标题和内容将被更新。
Aurelia 组件方法
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4