📅  最后修改于: 2020-12-09 04:52:49        🧑  作者: Mango

Aurelia是一个用于Web和移动应用程序开发的现代开源UI框架。它使您可以编写干净的模块化JavaScript。该框架遵循简单的约定，并专注于Web标准。本教程适用于以前没有机会使用此框架的开发人员。本教程包含简单易懂的示例。这些示例可以用作将来项目的参考。先决条件由于Aurelia提倡纯JavaScript，因此在学习框架之前，您需要了解该语言。我们将使用EcmaScript2016语法。您...

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

框架的最佳定义可以在Aurelia官方文档中找到-好吧，这实际上很简单。 Aurelia只是JavaScript。但是，它不是昨天的JavaScript，而是明天的JavaScript。通过使用现代工具，我们已经能够在ECMAScript 2016中从头开始编写Aurelia。这意味着我们可以使用本机模块，类，装饰器等等，您也可以使用它们。Aurelia不仅使用现代和未来的JavaScript编写...

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

在本章中，您将学习如何开始使用Aurelia框架。在此之前，您需要在系统上安装NodeJS。Sr.NoSoftware & Description1NodeJS and NPMNodeJS is the platform needed for Aurelia development. Checkout ourNodeJS Environment Setup.第1步-下载Aurelia软件包在下载A...

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

在本章中，我们将解释在上一章中创建的Aurelia启动应用程序。我们还将指导您完成文件夹结构，以便您掌握Aurelia框架背后的核心概念。资料夹结构package.json代表有关已安装的npm软件包的文档。它还显示了这些软件包的版本，并提供了一种简单的方法，可以在需要开发人员之间共享应用程序时添加，删除，更改版本或自动安装所有软件包。像大多数基于HTML的应用程序一样，index.html是该应...

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

组件是Aurelia框架的主要构建块。在本章中，您将学习如何创建简单的组件。简单组件如上一章所述，每个组件都包含用JavaScript编写的view-model和用HTML编写的view。您可以看到以下视图模型定义。这是一个ES6示例，但您也可以使用TypeScript。app.js我们可以将值绑定到视图，如以下示例所示。$ {header}语法将绑定MyComponent中定义的标题值。相同的概...

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

Aurelia使用组件生命周期方法来操纵组件生命周期。在本章中，我们将向您展示这些方法并说明组件的生命周期。constructor()-构造方法用于初始化使用类创建的对象。首先调用此方法。如果未指定此方法，则将使用默认构造函数。created(owningView，myView)–创建视图和视图模型并将其连接到控制器后，将调用此方法。此方法有两个参数。第一个是声明组件的视图(owningView)...

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

Aurelia提供了一种动态添加组件的方法。您可以在应用程序的不同部分上重复使用单个组件，而无需多次包含HTML。在本章中，您将学习如何实现这一目标。第1步-创建自定义组件让我们在src文件夹中创建新的组件目录。在此目录中，我们将创建custom-component.html。该组件将稍后插入HTML页面中。custom-component.html第2步-创建主要组件我们将在app.js中创建简...

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

在本章中，您将学习如何使用Aurelia依赖项注入库。首先，我们需要在src文件夹中创建新文件dependency-test.js。在此文件中，我们将创建一个简单的DependencyTest类。此类稍后将作为依赖项注入。src / dependency-test.js注入在我们的app.js文件中，我们将导入上面创建的注入库和DependencyTest类。要注入类，我们使用@inject()函...

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

在本章中，我们将向您展示如何根据需要配置Aurelia框架。有时，在将应用呈现给用户之前，您需要设置初始配置或运行一些代码。第1步-创建main.js让我们在src文件夹中创建main.js文件。在此文件中，我们将配置Aurelia。您还需要告诉Aurelia加载配置模块。您可以在以下示例中看到带注释的部分。index.html第2步-默认配置下面的代码显示了如何使用默认配置。配置函数允许手动设置...

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

在开始构建应用程序时，大多数时候您将需要使用一些其他插件。在本章中，您将学习如何在Aurelia框架中使用插件。标准插件在上一章中，我们了解了如何在Aurelia框架中使用默认配置。如果您使用默认配置，则将提供标准的插件集。defaultBindingLanguage()-此插件提供了一种将view-model与view连接的简便方法。您已经看到了单向数据绑定语法($ {someValue})。即...

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

Aurelia有自己的数据绑定系统。在本章中，您将学习如何与Aurelia绑定数据，并说明不同的绑定机制。简单绑定您已经在我们前面的一些章节中看到了简单的绑定。$ {…}语法用于链接veiw模型和视图。app.jsapp.html双向绑定奥雷利亚的美丽在于它的简单。当我们绑定到输入字段时，将自动设置双向数据绑定app.jsapp.html现在，我们有了视图模型和视图链接。每当我们在输入字段中输入一...

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

在本章中，您将学习如何使用行为。您可以将绑定行为视为可以更改绑定数据并以其他格式显示的过滤器。风门此行为用于设置应该多长时间进行一次绑定更新。我们可以使用节流阀来减慢更新输入视图模型的速度。考虑上一章中的示例。默认速率为200毫秒。我们可以通过在输入中添加＆2000节流阀将其更改为2秒。app.jsapp.html去抖动防抖几乎和油门一样。区别在于，防抖动将在用户停止键入后更新绑定。如果用户停止键...

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

如果需要在Aurelia应用程序中转换某些值，则可以使用转换器，而不是手动将值转换为所需的格式。转换日期当我们要将默认日期值转换为某些特定格式时，可以使用momentJS库。这是一个用于处理日期的小型库。让我们创建一个新文件converters.js。我们将使用此文件添加转换器特定的代码。使用以下命令或手动创建文件。converter.js在此文件中，我们将导入矩量库并将DateFormatVal...

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

在本章中，您将了解Aurelia事件。活动代表甚至委托也是一个有用的概念，其中事件处理程序附加到一个顶级元素，而不是DOM上的多个元素。这将提高应用程序的内存效率，应尽可能使用它。这是在Aurelia框架中使用事件委托的简单示例。我们的视图将具有一个带有click.delegate事件的按钮。app.html单击该按钮后，将调用myFunction()。app.js我们将获得以下输出。事件触发在某...

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

当事件需要附加到更多侦听器时，或者需要观察应用程序的某些功能并等待数据更新时，应使用事件聚合器。Aurelia事件聚合器有三种方法。publish方法将触发事件，并且可以由多个订阅者使用。要订阅事件，我们可以使用subscription方法。最后，我们可以使用dispose方法分离订户。下面的示例演示了这一点。我们的视图将只有三个功能的三个按钮。app.html我们需要先导入eventAggreg...