angular 默认数据改为单向绑定

数据绑定

1. 插值表达式

<h1>{{title}}</h1>

2. 使用方括号将HTML标签的一个熟悉绑定到一个表达式

<img [src]='imgURL'>

3. 使用小括号将组件的控制器的一个方法绑定为模板上的一个事件处理器

<button (click)='toTitle()'>商品详情</button>

事件绑定

<button (click)='toTitle()'>商品详情</button>

1. () 代表这是一个事件
2. 括号里面的是事件名称
3. '' 里面执行的表达式
4. $event 浏览器事件对象
5. <button (click) = 'saved = true'> 属性赋值saved会被设置为true
6. HTML属性是不变的，DOM属性是可变的

DOM属性绑定图示

image.png

HTML属性绑定(优先使用DOM绑定 )

1. 基本的html属性绑定

<td [attr.colspan='tableColspan']>tabe</td>

2. css类绑定

• 替换绑定

<div class='aaa bbb' [class]='some'>data</div>  // 注意这个class会完完全全替换掉这里面的class

• 根据后面的 值true就添加

// special 是样式名称   some是返回一个boolean
<div class='aaa bbb' [class.special]='some'>data</div> 

• 控制多个clss

//后台可以直接绑定一个对象
<div [ngClass]='{aaa:isAAA}'>data</div> 

3. 样式绑定

// 带单位 style.font-size.rem
<div [style.color]='{isColor ? 'red':'green'}'>data</div> 
//后台可以直接绑定一个对象
<div [ngStyle]='{'color':isColor ? 'red':'green'}'>data</div>

HTML属性绑定图示

image.png

双向绑定

1. 数据双向绑定

// 只有ngModel绑定才是双向绑定的
<input [(ngModel)] = 'name'>
<p>{{name}}</p>