Aurelia 介绍
Aurelia 是下一代的 JavaScript 客户端框架，利用一些简单便利的措施来加强你的创造力。
特性：
-
前瞻性：采用 ES6 和 ES7 编写，集成很多 Web 组件，无外部依赖
-
先进的架构
-
双路数据绑定
-
可扩展 HTML
-
路由和 UI 组件
-
MV* 模式
-
支持多种语言：ES 6&7、TypeScript、CoffeeScript 等
-
可测试
基础页面 index.html：
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="jspm_packages/github/twbs/[email protected]/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="jspm_packages/npm/[email protected]/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="styles/styles.css"> </head> <body aurelia-app> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.baseUrl = 'dist'; System.import('aurelia-bootstrapper').catch(console.error.bind(console)); </script> </body> </html>
app.js:
export class Welcome{
constructor(){
this.heading = 'Welcome to the Aurelia Navigation App!';
this.firstName = 'John';
this.lastName = 'Doe';
}
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
welcome(){
alert(`Welcome, ${this.fullName}!`);
}
}
app.html
<template>
<section>
<h2>${heading}</h2>
<form role="form" submit.delegate="welcome()">
<div class="form-group">
<label for="fn">First Name</label>
<input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
</div>
<div class="form-group">
<label for="ln">Last Name</label>
<input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
</div>
<div class="form-group">
<label>Full Name</label>
<p class="help-block">${fullName}</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</section>
</template>
Aurelia 官网
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
