同是mvvm框架，他們之間是很相似的，如何你已經熟悉其中的一個，那么另一個也就基本上也就會的差不多了。
一、動態屬性、值、事件綁定
vue中使用v-bind:或者之間分號：進行綁定
ng中左括號[]進行綁定
v-model –--->[(ngModel)]
@click ---->(click)
二、條件判斷
v-if----->*ngIf
三、顯示隱藏
v-show------> [hidden]
四、遍歷一組數組進行渲染
v-for="item in items" -----> *ngFor="let item of items" v-for="(item ,index)in items" -----> *ngFor="let item of dots; index as i"。。。。
父子組件如何傳值
1.父組件傳值到子組件
<app-header [msg]="msg"></app-header>2. 子組件接受父組件的值
子組件里面通過 @Input 接收父組件傳過來的數（需要先引入input模塊）--相當於vue的props
3.子組件主動發送數據給父組件
引入Output,EventEmitter
import {Output,EventEmitter} from "@angular/core"; @Output() private childOuter = new EventEmitter();// 子組件主動發送數據this.childOuter.emit("我是子組件的數據");
4.在父組件中接收數據
// childOuter即是子組件發送的outer（類似Android中的廣播）
<app-index (childOuter)="getData($event)"></app-index> // ts文件中： getData(msg:string) { console.log(msg);// 接收到的數據 }------相當於vue的子組件派發事件到父組件
5.父組件主動調用子組件
方法1
// 引用子組件
<app-index #index></app-index> // 使用子組件中的方法
<button (click)="index.childRun()">調用index中的方法</button>方法2
也可以在ts文件中調用：
// 引用子組件 html文件 <app-index #index></app-index> <button (click)="parentClick(index)">調用index中的方法</button>// ts 文件
parentClick(obj) { obj.childRun(); }方法3
ViewChild主動獲取數據 相當於vue 父組件里面對子組件加ref引用找到子組件調用其方法
ViewChild 是屬性裝飾器，用來從模板視圖中獲取匹配的元素
頁面上#xx ts中@ViewChild(xx)
獲取匹配的組件也可以是元素，
組件直接導入 @ViewChild(組件名)
元素頁面上加#xx @ViewChild(xx)
參考 http://oomusou.io/angular/viewchild/
子組件里面監聽父組件傳遞過來值的變化
onChanges鈎子使用 相當於vue里面的watch
……
ionic/ng常用代碼片段
[src]="base64Image" //是否存在 [hidden]="lastImage === null" //是否禁用 [disabled]="lastImage === null" //文案顯示互斥 {{isFavourite ? '取消關注' : '關注'}} //元素顯示互斥 *ngIf="!isSelf" 渲染與否，切換的時候回重新渲染 如何已經有了class再追加class 而不是替換class <span class="dot" [ngClass]="{active: currentPageIndex === i }" *ngFor="let item of dots; index as i"></span> 替換class <span class="dot" [class]="{active: currentPageIndex === i } 或者 [hidden]=”!isSelf” 不重新渲染只顯示隱藏 注意與v-show相反等同於 v-show=’isSelf’ Class顯示互斥 <span [ngClass]="{'active':sex===1}" (click)="switchSex(1)"></span><b (click)="switchSex(1)">男</b> <span [ngClass]="{'active':sex===0}" (click)="switchSex(0)"></span><b (click)="switchSex(0)">女</b> 根據布爾值綁定某一屬性 [color]="btnDisable===true?'light':''" 注意不能帶花括號 下面2種都是不對的 <button ion-button block [color]="{btnDisable===true?'light':''}">下一步</button> <button ion-button block [color]="{'light':btnDisable===true}">下一步</button>