前端框架Aurelia——组件Component(一)

本文介绍了Aurelia框架中的UI组件Component,组件由view和view-model组成,通过强大的数据绑定实现双向通信。创建组件时,需要创建view-model文件(如hello.ts)和view文件(如hello.html)。默认情况下,数据绑定是单向的,但可以通过不同的指令如.bind、.one-way、.two-way和.one-time来指定不同方向。同时,可以使用.trigger进行事件绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

In Aurelia, user interface components are composed of view and view-model pairs.

组件由html和.ts或者.js文件为一组。

Once instantiated, Aurelia's powerful databinding links the two pieces together allowing changes in your view-model to be reflected in the view and changes in your view to reflected in your view-model. 

一旦组件实例化,双向绑定。

To create a UI component, you need only create two files, one for each of the component parts. Let's create a simple "Hello" component. To do that we'll need a hello.ts for our view-model and hello.html for our view.

hello.html  hello.ts为组件一组文件。


hello.ts

export class Hello {
  firstName: string = 'John';
  lastName: string = 'Doe';

  sayHello() {
    alert(`Hello ${this.firstName} ${this.lastName}. Nice to meet you.`);
  }
}


hello.html

<template>
  <input value.bind="firstName">
  <input value.bind="lastName">

  <button click.trigger="sayHello()">Say Hello</button>
</template>

Simply append .bind to any HTML attribute in the DOM, and Aurelia will bind it to the corresponding property in your view-model.

input的value属性绑定firstName这个变量,firstName这个变量是在view model里面定义的。


The .bind binding command configures the "default binding behavior" for the attribute. For most attributes, this is a one-way binding, where data updates only flow in one direction: from the view-model to the view. However, usually, the behavior you want for form controls is two-way binding so that data not only flows from your view-model into your view, but user input in the view flows back into your view-model.

对大多数属性来说,.bind是单向的数据流,view model流向view。

Those are the defaults, but you can always be explicit about the binding direction by using .one-waytwo-way or .one-time in place of .bind (.one-time renders the initial value of the property but does not perform synchronization thereafter, making it a nice memory and performance gain for data you know will not change).

我们可以明确指定单向one-way,双向two-way,一次one-time来替代.bind。一次one-time数据初始化之后就不会改变了。

 Any event, either native or custom, can be bound using .trigger this causes the expression to be invoked when the indicated event is fired.

.trigger来进行事件绑定。无论是原生的还是自定义的事件。






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值