📜  Aurelia-组件

📅  最后修改于: 2020-12-09 05:20:57             🧑  作者: Mango


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

简单组件

如上一章所述,每个组件都包含用JavaScript编写的view-model和用HTML编写的view 。您可以看到以下视图模型定义。这是一个ES6示例,但您也可以使用TypeScript

app.js

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

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

app.html


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

Aurelia组件简单

组件功能

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

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


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

奥雷利亚分量法