基本语法：
1、双向数据绑定
vue
指令：v-model="msg"
react
constructor(){
this.state{
msg:"双向数据绑定"
}
render(){
<input type="text" value={this.state.msg} onChange={(ev)=>this.handleChange(ev)} />{msg}
}
handleChange(ev){
this.setState({
msg:ev.target.value
})
}
angular --ngMel（属性型指令）
app.Module.ts:
import FromsModule from "@angular/froms"; app.component.ts:
export class Appcomponent{
msg:"双向数据绑定"
} app.components.html:
<input [(ngModel)]="msg" />{{msg}}
2、条件渲染：
vue
指令：
v-if v-else-if v-else v-show
react
使用三目（三联）运算：{true ? x:y}
angular ---*ngIf(结构型指令)
指令：*ngIf 没有else指令
如果想要else，要使用ng-template
demo:
<div *ngIf="isShow else elseBack">aaaaaaaaaaaaaaaaaaa</div>
<ng-template #elseBack>ddddddddddddddd</ng-template> ng-template:模板
3、列表渲染：
vue
指令：v-for
<li v-for="item,index in list" key="index">{{item}}</li>
react
this.state.list.map((item)=>{
return <li key="item.id">{item}</li>
})
angular
指令：*ngFor <ul>
<li *ngFor="let item of list,let i=index">{{i}},{{item}}</li>
</ul> <ul>
<li *ngFor="let item of list,index as i">{{i}},{{item}}</li>
</ul> 指令：ngSwitch //多行选择 js:
nowSwitch=1;
listSwitch=[1,2,3]; html：
<div [ngSwitch]="nowSwitch"> //nowSwitch是什么值。就显示值为其的ngSwitchCase.
<div *ngFor="let item of listSwitch"><div *ngSwitchCase="item">{{item}}</div></div>
</div>
angular小案例：Todos
app.component.html: <input type="text" [(ngModel)]="info" (keydown)="handleAdd($event)" > //输入框
<ul>
<li *ngFor="let item of list,index as i">
{{i}},{{item}} <button (click)="handleRemove(i)">X</button>
</li> //显示列表
</ul> app.component.ts: export class AppComponent {
list:Array<any>=[111,222,333]; //加入数据的数组
info=""; //数据绑定变量
handleAdd(ev){ //添加数据的方法
if(ev.keyCode===13) {
this.list.unshift(this.info);
this.info = "";
}
} handleRemove(index){ //删除数据的方法
this.list.splice(index,1);
}
}