この内容について
この内容は、私が運営しているサイトの一部抜粋です。よければそちらもご活用ください。
Reactチートシート | コレワカ
Vue.jsチートシート | コレワカ
AngularJSチートシート | コレワカ
それぞれの特徴
| React | Vue.js | AngularJS | |
|---|---|---|---|
| 特徴 | 状態管理に特化したUI構築のためのライブラリ | トランスコンパイル不要なUI構築のためのライブラリ | 大抵の機能が全て揃うフルスタックなフレームワーク |
| 開発規模 | 小規模〜大規模 | 小規模〜中規模 | 中規模〜大規模 |
| 組み合わせ | Redux・TypeScript・webpack・babelなど | Vuex・Laravel・Firebaseなど | TypeScript・AWSなど |
データバインディングとは
データと描画を同期する仕組みのこと
それぞれのコード
React
See the Pen React_onChange by engineerhikaru (@engineerhikaru) on CodePen.
Vue.js
See the Pen Vue.js_v-model by engineerhikaru (@engineerhikaru) on CodePen.
AngularJS
See the Pen AngularJS_ng-model by engineerhikaru (@engineerhikaru) on CodePen.
簡単な解説
React
Reactは、単方向データバインディングなので、
setStateでデータを保管し、changeイベンド(onChange)で、View ⇆ Modelを実現しています。
Vue.js
Vue.jsは、双方向データバインディングなので、
Model関数(v-model)を使って、View ⇆ Modelを実現しています。
AngularJS
AngularJSは、双方向データバインディングなので、
Model関数(ng-model)を使って、View ⇆ Modelを実現しています。
おまけ
jQueryで書いた場合
キーが押された時に処理を実行するkeyup関数とテキスト出力をするためのtext関数を使って、
View ⇆ Modelを実現しています。
See the Pen
jQuery_databinding by engineerhikaru (@engineerhikaru)
on CodePen.