Angular中的数据绑定

(1)HTML绑定：{{}}

(2)属性绑定:[]

注意:属性绑定通常赋值为变量，如果赋值为常量(如字符串常量)

必须用引号括起来，如<img [src]="'../../assets/'+imgUrl">

(3)事件绑定：()

   (click)="add()"

   注意：事件名用()括起来，处理函数后必须有()

(4)指令绑定

(5)双向数据绑定

Vue.js中的常用命令：v-on、v-bind、v-for、v-if、v-show、v-hide、v-else、v-text/html、v-clock

2.Angular中的指令系统

(1)循环绑定  *ngFor

    <ANY  *ngFor="let 临时变量 of 数据">

    <ANY  *ngFor="let 临时变量 of 数据;  let i=index;">

    <ANY  *ngFor="let 临时变量 of 数据;  index as i ">

(4)样式绑定：[ngClass]

    <ANY   [ngClass="obj"]>

     说明：ngClass绑定的值必须是一个对象！对象的属性就是CSS class名，

 属性值为true/false,true的话该class就出现，否则该class不出现。

(5)了解：特殊的选择绑定：

    <ANY    [ngSwitch]="表达式">

                <ANY   *ngSwitchCase="值1"></ANY>

                <ANY   *ngSwitchCase="值2"></ANY>

                 ...

                 <ANY   *ngSwitchDefault></ANY>

    </ANY>

(6)双向数据绑定指令:[(ngModel)]-----重点

     方向 1：Model => View,模型变则视图变，用[ ]绑定

     方向 2：View => Model,视图(表单元素)模型变，用()绑定

     <input/select/textarea [(ngModel)]="uname">

注意：1.如果想直接监视模型数据的改变，可以绑定ngModelChange事件

2.ngModel指令不在commonModule模块中，而在FormsModule中，使用之前必须在

主模块中导入该模块：

      //app.module.ts

      @NgModule({

           imports:[BrowserModule,FormsModule]

     })

Angular中的指令分为三类：

(1)组件指令：NG中Component继承自Directive

(2)结构性指令：会影响DOM树结构，必须使用 * 开头，如*ngFor、*ngIf

(3)属性型指令：不会影响DOM树结构，只是影响元素外观或行为，必须用[ ]括起来，

如[ngClass],[ngStyle]

3.扩展小知识：如何自定义指令

提示：创建指令的简单工具：ng   g   directive   指令名 

自定义指令都是作为元素属性来使用的，selector应该是:[指令名]

<ANY  xuYaoQiangDiao>...</ANY>