Angular数据绑定(1)--绑定方式\事件绑定

    首先我们要理解何为数据绑定：

    数据绑定就是将组建控制器中的方法或属性与模版链接起来。简单理解就是视图和控制器进行一个数据交互绑定。

    绑定类型分事件绑定和属性绑定共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">