首先我们要理解何为数据绑定:
数据绑定就是将组建控制器中的方法或属性与模版链接起来。简单理解就是视图和控制器进行一个数据交互绑定。
绑定类型分事件绑定和属性绑定共2种。
绑定方式1: 差值表达式(属性绑定)
<h1>{{myName}}</h1>
模版这里显示我的名字地方直接绑定了控制器的myName属性。
绑定方式2: Html标签属性绑定(属性绑定)
<img [src] = "imgUrl">
这里我们把图片的路径地址与控制器的 imgUrl做了绑定。
绑定方式3: 事件绑定
<button (click)="onClickEvent()">测试点击</button>
这里我们把按钮点击事件与控制器的onClickEvent方法进行了绑定。
以上三种方式都是数据单向绑定。
我们再来讲一下事件绑定格式,写一个标准的事件绑定格式来讲。
<input (input)="onInputEvent($event)">
(input) 的小阔包表示这是一个事件绑定。
input :是事件名称。
"onInputEvent($event)" :是组建中的方法名称。
$event : 参数。这一个标准的浏览器事件对象。
当输入框玩家有输入的时候就会执行onInputEvent这个方法。
事件绑定不一定要绑定一个方法,可以直接设置一个属性,如
<button (click)="relive = true">