Vue JS Jot Down

Environment

Node.js: v8.9.1 (Node Package Manager)

vue-cli: v2.9.1 (Vue Command Line Interface)

Supported Browser (https://caniuse.com/#feat=es5)

Continue reading Vue JS Jot Down

Advertisements

Accelerated Mobile Pages (AMP) Jot Down

AMP: Accelerated Mobile Pages (Google出品)

Use HTML, CSS, and JavaScript to create mobile pages and utilize a number of optimization techniques for lightning-fast load times.

AMP is a highly specialized way of making super-fast mobile web pages.

Currently, the ideal use for AMP is static content, such as articles, blog entries, and informational pages.

Core Component: AMP HTML, AMP JS, AMP Cache; Better using HTTPS

Rules

Continue reading Accelerated Mobile Pages (AMP) Jot Down

Angular 4 Jot Down Cont.

XXX.component.ts

// 宣告為Element
@Component({
  selector: 'app-server',
  ......
})
<app-server></app-server>

// 宣告為Attribute
@Component({
 selector: '[app-server]',
 ......
})

// 宣告為Style Class 
@Component({
 selector: '.app-server',
 ...... 
})

styleURL vs styles

@Component({
 styleUrls: ['./server.component.css'],
 ......
})

@Component({
 styles: [`
   h2 {color: DarkGreen}; 
 `], → 多行使用back quote
 ......
})

@Component({
 styles: ['h2 {color: DarkGreen};'], → 單行可使用single quote
 ......
})

Syntax

DataBinding

String Interpolation

// ts
export class xxxComponent {
  title = 'This is Title';
}

// HTML
{{ Variable Name }}
ex. {{ title }}

Property Binding

[property]="data"
ex. 
<button [disabled]="myProperty" .../>
<p [@myProperty]="state" .../>

Event Binding

(event)="expression"
ex. 
<p (click)="clickMe()" .../>
<input (input)="onUpdate($event)" .../> →$event用來取得event data

Function Syntax

() => { Biz logic }
同
function() { Biz logic }

Continue reading Angular 4 Jot Down Cont.