模板语法
插值表达式
二者没有区别，都是{{}}
for
vue
<div v-for="product of products"></div>
<div v-for="(product,index) of products"></div>
angular
<div *ngFor="let product of products"></div>
<div *ngFor="let product of products;let i = index" [attr.data-index]="i">
<div *ngFor="let item of this.rentData; let i = index"></div>
</div>
class 绑定
//绑定单个class
<div [class.th-level-indent]="item.is3LevelMenuItem"></div>
<p
[class.th-level-indent]="item.is3LevelMenuItem"
[class.th-layer-selected]="item.id === selectedItemId"
(click)="layerClick(item)"
>
{{item.text}}
</p>
//绑定多个，支持变量和方法(类似计算属性）
https://alligator.io/angular/class-binding-ngclass-angular/
<div [ngClass]="myClasses"></div>
myClasses = { important: this.isImportant, inactive: !this.isActive, saved:
this.isSaved, long: this.name.length > 6 }
style
<div [ngStyle]="{'background':backcolor}"></div>
If
vue : v-if='条件'
angular: *ngIf='条件‘
vue 支持 else 、else if； angular 需要插件依赖？
点击事件
vue: 后面可以跟括号也可以不跟
<button @click="share()">
Share
</button>
angular:
<button (click)="share()">
Share
</button>
(itemClick)="segmentClick($event)" 组件传递过来的参数$
属性绑定
vue
<a :title="product.name + ' details'"> </a>
angular
<a [title]="product.name + ' details'"> </a>
组件引用
angular
<a-map #amap></a-map> @ViewChild("amap") aMap: AMapComponent;
vue:
计算属性
angular
get resultTableViewHeight() {
const fullHeight = document.getElementById("bottomPopover").clientHeight;
const bottomPopoverSegment = document.getElementById("bottomPopoverSegment");
if (bottomPopoverSegment.children && bottomPopoverSegment.children.length) {
let x = document.getElementById("bottomPopoverSegment").children[0] as any;
let height = x.offsetTop + x.clientHeight;
if (fullHeight - height > 0) {
return fullHeight - height;
}
}
return 0;
}
vue:
computed
组件
组件双向绑定
@Input() showSlider: boolean = false;
@Output() showSliderChange = new EventEmitter();
clickMask() {
this.showSlider = false;
this.showSliderChange.emit(this.showSlider);
}