大話 語法糖

pardon110發表於2020-09-19

面對未解之事,人們總是習慣用已知觀念去具化去解釋

Vue

vue 把@事件繫結別名 動態屬性

@bind :attr

React

用過即丟,不留痕跡

<></>

Ng2

Ng2的邏輯基本是ts–> ng模組 –ng元件 –> 指令 套件

<div *ngIf="hero" class="name">{{hero.name}}</div>

星號(*)這個簡寫方法,而這個字串是一個微語法,而不是通常的模板表示式。 Angular 會解開這個語法糖,變成一個 <ng-template> 標記,包裹著宿主元素及其子元素。它的真實樣子是這樣

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

與屬性繫結使用中括號,事件繫結多了一種選擇on-字首

<button (click)="onSave()">儲存</button>
// 等價
<button  on-click="onSave()">On Save</button>

雙向繫結也有兩種選擇

<input [(ngModel)]="currentUser.firstName">
// 或
<input  bindon-ngModel="currentUser.firstName">
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章