Aurelia —— 类似 AngularJS 的 JavaScript 框架

最新推荐文章于 2021-03-22 23:10:18 发布

weixin_34258782

最新推荐文章于 2021-03-22 23:10:18 发布

阅读量279

点赞数

文章标签： javascript ui ViewUI

原文链接：https://yq.aliyun.com/articles/113157

版权

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/bootstrap@3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.2.0/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>

文章转载自开源中国社区 [http://www.oschina.net]

weixin_34258782

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Aurelia —— 类似 AngularJS 的 JavaScript 框架

Aurelia 是下一代的 JavaScript 客户端框架，利用一些简单便利的措施来加强你的创造力。特性：前瞻性：采用 ES6 和 ES7 编写，集成很多 Web 组件，无外部依赖先进的架构双路数据绑定可扩展 HTML路由和 UI 组件MV* 模式支持多种语言：ES 6&7、TypeScript、CoffeeScript 等可...
复制链接

扫一扫