前端框架Aurelia - 自定义组件

自定义元素（组件）- 含有ViewModel的自定义组件

.ts文件
1.首先我们要引入两个依赖！customElement和bindable。
2.下面这个例子还示意了如何给自定义组件绑定属性to，我们使用@bindable来绑定。
3.我们在这里用@customElement（“say-hello”）来定义这个自定义组件的名字，也是我们在使用这个自定义组件的时候的标签名。

import {customElement, bindable} from 'aurelia-framework';@customElement('say-hello')
export class SayHello {@bindable to: string;speak(): void {alert(`Hello ${this.to}!`);}
}

.html文件

<template><button click.trigger="speak()">Say Hello To ${to}</button>
</template>

Custom Element Use

input里面有一个属性ref=“name”,然后我们在下面的组件用了这个name.value，我们之所以用ref这个属性，是为了方便在有些时候方便的拿到html的DOM。
在需要使用say-hello这个自定义组件的时候，我们需要在使用它的组件内require这个自定义组件。

<template><require from="say-hello"></require><input type="text" ref="name"><say-hello to.bind="name.value"></say-hello>
</template>

自定义元素（组件）- 不含有ViewModel的自定义组件

Declare Custom Element Without View-Model With Binding Copy
HTML

<template bindable="greeting,name">Say ${greeting} To ${name}
</template>

Add Global Custom Element Without View-Model Copy
TypeScript

要将这个不含有VM的html文件加入globalResources()方法中
.ts

aurelia.use.globalResources('./js-less-component.html');

使用这个自定义组件
2. 我们首先还是要引入这个html文件才可以使用。
3. 这个html文件名就是我们使用组件标签时候的标签名。

<require from="./js-less-component.html"></require><js-less-component greeting="Hello" name.bind="someProperty"></js-less-component>

自定义组件变量绑定

当绑定变量到组件上时，在自定义组件的VM里面，我们用驼峰原则定义变量，但是如果在其他html 文件里面我们要使用我们的自定义组件，我们用中间放一个破折号的形式使用我们的自定义组件名，这个破折号的自定义组件名字，是需要我们用@customElement（“say-hello”）定义的

自定义组件的ViewModel

import {bindable} from 'aurelia-framework';@customElement("say-hello");
export class SayHello {@bindable to: string;@bindable greetingCallback: Function;speak(): void {this.greetingCallback(`Hello ${this.to}!`);}
}

自定义组件的使用 .html

<template><require from="./say-hello"></require><input type="text" ref="name"><say-hello to.bind="name.value" greeting-callback.call="doSomething($event)"></say-hello>
</template>

自定义组件的其他方法

查看官网： http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9

前端框架Aurelia - 自定义组件相关推荐

目前比较火的前端框架及UI组件
看到的一篇总结性的文章,收藏一下,感兴趣的可以自己看看,哪些是已经会的,哪些是没听说过的,哪些是一知半解的,都可以稍微看看. 一.前端框架库: 1.Zepto.js 地址:点击打开链接描述:Zept ...
html5组件库,资源 | 10套好用的前端框架、设计组件库推荐
No.1 Ant Design UI 框架解析:蚂蚁金服出品,基于 ReactJS.一个服务于企业级产品的设计体系,支持桌面端.手机端.基于『确定』和『自然』的设计价值观,通过模块化的解决方案,让 ...
前端框架Vue：组件之间的通信、插槽的使用
Vue组件与插槽一.组件化开发思想组件化规范 Web Components 我们希望尽可能多的重用的代码自定义组件的方式不太容易(html,js ,css) 多次使用组件可能导致冲突二.组件注 ...
前端框架Aurelia——组件Component（一）
In Aurelia, user interface components are composed of view and view-model pairs. 组件由html和.ts或者.js文件为 ...
前端框架Aurelia —— 路由Router
基本配置为了使用Aurelia的路由,我们的组件view必须有一个元素.为了配置路由,组件的VM需要一个configureRouter()方法. app.html <template>& ...
前端框架Aurelia - feature（）
Introduction 有时,您拥有完整的组件或相关功能,它们共同构成了一个"特性".这个"特性"甚至可能是由您的团队中的一组特定的开发人员所拥有的.你想要这 ...
前端框架Aurelia - GlobalResources（）
Introduction 你可能有许多资源需要在多个页面使用.这时候将这些资源做成全局的是明智的. 框架配置class提供了globalResources方法,这个方法的参数是一个或者多个string ...
前端框架Aurelia - Binding Radios
1.Introduction A group of radio inputs is a type of "single select" interface. 单选按钮. Aurel ...
前端框架Aurelia - Binding Checkbox
1.checked Bind a boolean property to an input element's checked attribute using checked.bind="m ...