以下若出现 V，A 则以 V 代表 Vue , 以 A 代表 Angular

先从模板语法说起

显示文本

// Vue
<h3>Message: {{ msg }}</h3>// Angular
<h3>Current customer: {{ currentCustomer }}</h3>
复制代码

显示 HTML

// Vue 使用 v-html
<p v-html="rawHtml"></p>// Angular 使用 [innerHTML]
<p [innerHTML]="htmlSnippet"></p>
复制代码

使用 JavaScript 表达式

// Vue 
<h3>Message: {{ ok ? 'YES' : 'NO' }}</h3>// Angular
<h3>Message: {{ ok ? 'YES' : 'NO' }}</h3>
复制代码

条件渲染

// Vue 使用 v-if
<div v-if="type === 'A'"> A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>// Angular 使用 *ngIf 注意星号（*）
<div *ngIf="type === 'A'; else elseBlock">Content to render when type === 'A' is true.</div>
<ng-template #elseBlock>Content to render when type === 'A' is false.</ng-template>
复制代码

列表渲染

// Vue 使用 v-for
<li v-for="(item,index) in items">{{index}} / {{ item.message }}
</li>// Angular 使用 NgFor
<li *ngFor="let item of items; index as i">{{i}} / {{ item.message }}
</li>
复制代码

事件处理

// Vue 用 v-on 指令监听 DOM 事件,简写使用 @ 符
<button v-on:click="counter += 1">Add 1</button>
<button @click="counter += 1">Add 1</button>
<input @blur="update(box.value)">// Angular 使用小括号 ()
<button (click)="deleteHero()">Delete hero</button>
<input (blur)="update(box.value)">
复制代码

表单输入绑定

// Vue 使用 v-model 指令进行双向绑定
<input v-model="message" placeholder="edit me">// Angular 使用 [(ngModel)] 双向绑定
<input [(ngModel)]="name">
复制代码

数据绑定

// Vue 使用 v-bind 指令，简写 :
<a v-bind:href="url">...</a>
<a :href="url">...</a>// Angular 使用 [...]
<a [href]="url">...</a>
复制代码

Class 与 Style 绑定

// Vue 使用 v-bind 指令，简写 :
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>// Angular 使用 [...] 
<div [class.active]="isActive"></div>
<div [style.color]="activeColor"></div>
复制代码

Class 与 Style 的多值绑定

// Vue 使用 v-bind 指令，简写 :
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>// Angular 使用 NgClass, NgStyle
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
<div [ngStyle]="currentStyles">This div is initially italic, normal weight, and extra large (24px).</div>// js
currentClasses: {};
setCurrentClasses() {// CSS classes: added/removed per current state of component propertiesthis.currentClasses =  {'saveable': this.canSave,'modified': !this.isUnchanged,'special':  this.isSpecial};// CSS styles: set per current state of component propertiesthis.currentStyles = {'font-style':  this.canSave      ? 'italic' : 'normal','font-weight': !this.isUnchanged ? 'bold'   : 'normal','font-size':   this.isSpecial    ? '24px'   : '12px'};
}
复制代码

过滤器

// Vue 和 Angular 都使用管道操作符 ( | )
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>// Angular 
<div>Title through uppercase pipe: {{title | uppercase}}</div>// Angular 中多了两个操作符：安全导航操作符 ( ?. ) ，非空断言操作符（!）防止对象属性不存在时报错
<div>Title through uppercase pipe: {{currentHero?.name}}</div>
<div>Title through uppercase pipe: {{currentHero!.name}}</div>
复制代码

生命周期

• 这块的比较暂时不知道怎么描述，先把文档搬出来，自己看吧。
• Vue 文档地址： cn.vuejs.org/v2/api/#bef…
• Angular 文档地址：angular.io/guide/lifec…

Vue 的生命周期

Vue	说明
beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	el 被新创建的 vm.el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新
activated	keep-alive 组件激活时调用。
deactivated	keep-alive 组件停用时调用。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured	当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。

Angular 的生命周期

Angular	说明
ngOnChanges()	当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象,在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
ngOnInit()	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。
ngDoCheck()	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个变更检测周期中，紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。
ngAfterContentInit()	每当 Angular 把外部内容投影进组件/指令的视图之后调用。第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked()	每当 Angular 完成被投影组件内容的变更检测之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用
ngAfterViewInit()	每当 Angular 初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked()	每当 Angular 做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy()	每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。