前端框架Aurelia——组件Component(一)
来源:互联网 发布:直通车优化技巧 编辑:程序博客网 时间:2024/04/29 00:58
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.`); }}
<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-way
, two-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来进行事件绑定。无论是原生的还是自定义的事件。
- 前端框架Aurelia——组件Component(一)
- 前端框架Aurelia——组件Component(二)组件生命周期
- 前端框架Aurelia —— 路由Router
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 前端框架Aurelia
- 【Bootstrap框架】——组件(Component)
- 前端框架—Bootstrap(一)
- jQuery选择器之id选择器
- 第一章:开篇
- 2017艾普兰机智云全家福
- 两种方式处理ViewPager点击事件
- TCP 和 UDP 的区别
- 前端框架Aurelia——组件Component(一)
- DPDK中文-intel网卡的RSS
- class.getName()和class.getSimpleName()
- Linux下开启或关闭防火墙
- 谷歌浏览器被搜狗劫持问题
- shell 中数学计算总结
- 研究理论有用吗?
- Linux PPP实现源码分析-good
- tomcat配置虚拟文件