Overview

• lit-html：1.3.0
• React：16.13.1
• Angular(TS): 10.1.1
• Vue：2.6.12

Content

Html content

/	lit-html	React	Vue	Angular
static HTML	...	...	...	...
dynamic text	${expression}	{ expression }	{{ expression }}	{{ expression }}

Bind attributes

lit-html	React	Vue	Angular
class=${expression}	value={expression}	v-bind:value="expression" 或 :value="expression"	[value]="expression"

• | - | - | [attr.arial-label]="expresssion"

Bind properties

lit-html	React	Vue	Angular
.value=${expression}	value={expression}	v-bind:value="expression" 或 :value="expression"	[value]="expression"

Event handling

/	lit-html	React	Vue	Angular
handler	@click=${clickHandler}	onClick={clickHandler}	v-on:click="clickHandler" 或 @click="clickHandler"	(click)="clickHandler"
lambda	@click=${lambda}	onClick={lambda}
statement			v-on:click="statement" 或 @click="statement"	(click)="statement"

Conditional rendering

lit-html

• Javascript conditional statement
  • ? :
  • if/else/else-if
  • for
  • switch
  • Array.map
• repeat/nothing

html`
  condition ? html`<p></p>` : html`<br />`
`

React

• Javascript conditional statement
  • ? :
  • if/else/else-if
  • for
  • switch
  • Array.map
• &&
• null

conditon ? (<p></p>) : <br />

Vue

• v-if/v-else/v-else-if
• v-for
• v-show

<p v-if="condition"></p>
<br v-else />

Angular

• ngIf
• ngFor
• ngSwitch/ngSwitchCase

<p *ngIf="condition"></p>
<br *ngIf="!condition" />

Style

lit-html

• shadow DOM

html`
  <style>
    :host { ... } 
  </style> 
`;

• classMap

const itemTemplate = (item) => {
  const classes = {selected: item.selected};
  return html`<div class="menu-item ${classMap(classes)}">Classy text</div>`;
}

• styleMap

const myTemplate = () => {
  const styles = {color: myTextColor};
  html`<div style=${styleMap(styles)}>Hi there!</div>`;
};

React

• Class Object syntax

<div className={classObject}></div>

• Class Object/literal style

<div style={styleObject}></div>

<div style={{ height: 10 }}></div>

Vue

• Class Object/Array syntax

<div class="static" v-bind:class="{ active: isActive }"></div>

<div class="static" v-bind:class="[activeClass, errorClass]"></div>

• Style Object/Array syntax

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Angluar

• Class Single/String/Object/Array syntax

<div [class.foo]="hasFoo"></div>

const str = "my-class-1 my-class-2 my-class-3";
<div [class]="str"></div>

const obj = {foo: true, bar: false};
<div [class]="obj"></div>

const arr = ['foo', 'bar'];
<div [class]="arr"></div>

• Style Single/String/Object/Array syntax

<div [style.width]="width"></div>

const str = "width: 100px; height: 100px";
<div [style]="str"></div>

const obj = {width: '100px', height: '100px'};
<div [style]="obj"></div>

const arr = ['width', '100px'];
<div [style]="arr"></div>

参考

lit-html.polymer-project.org/guide

reactjs.org/docs/gettin…

vuejs.org/v2/guide/

angular.io/docs