模板语法

插值表达式

二者没有区别,都是{{}}

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 / output名字必须规范
@Input() showSlider: boolean = false;
@Output() showSliderChange = new EventEmitter();

//组件内部触发值的改变需要调用下emit
clickMask() {
  this.showSlider = false;
  this.showSliderChange.emit(this.showSlider); //支持0-1个参数
}