勉強の為に転載しました。
https://qiita.com/hashrock/items/e31b36248f3011ff7853
この記事は最終更新日から1年以上が経過しています。
最近話題のAngularJSですが、学習コストが辛いのが難点です。
チームでのWebアプリ開発に半年ほど利用していましたが、
「難しい」「辛い」「闇」という声が多かったので、
よりシンプルなVue.jsに移行することにしました。
「難しい」「辛い」「闇」という声が多かったので、
よりシンプルなVue.jsに移行することにしました。
Vue.jsはAngularのコードを一部利用して作成されており、多くの点で共通した書き
方が出来ます。
以下にご紹介します。
方が出来ます。
以下にご紹介します。
(カスタムDirective作るほど使い込んでいなかったので、あくまで初歩的なサンプル
となります。ご容赦ください)
となります。ご容赦ください)
AngularJSの基本形
基本的に、バインドする変数やメソッドを$scopeに生やす形になります。
Vue.jsの基本形
基本的にJSONオブジェクトとして、バインディングする変数やメソッドを渡します。
$scopeに生やしていた変数は、data内に記述します。
また、バインド先の要素をelに指定します(そのためng-controllerやng-app相当の
ディレクティブがない)。
$scopeに生やしていた変数は、data内に記述します。
また、バインド先の要素をelに指定します(そのためng-controllerやng-app相当の
ディレクティブがない)。
Directive
多くの組み込みDirectiveがVueにも用意されており、
基本的に「ng-*」を「v-*」に置き換えてヘルプを参照すればいいです。
基本的に「ng-*」を「v-*」に置き換えてヘルプを参照すればいいです。
ng-ifはv-ifに、ng-viewはv-viewに、ng-modelはv-modelに置き換えられます。
例:ng-clickからv-onに置き換え
注意点として、ng-clickはv-onに置き換えられます。
Angular版
Vue版
例:ng-repeatからv-repeatに置き換え
ほとんど同じです。ネストも問題なく可能です。
Angular版
Vue版
$httpや$q
Vue.jsにはありません。jQueryや同等のライブラリで置き換える事になります。
$qは同等のライブラリ、qを使いましょう。
https://github.com/kriskowal/q
https://github.com/kriskowal/q
AngularJS Batarangの代替は?
Vue.jsは、dataに指定したオブジェクトにgetter, setterを生やす仕様のため、
インスペクタで変数の内容を見ようとすると、getterとsetterだらけでひどいこと
になります。
インスペクタで変数の内容を見ようとすると、getterとsetterだらけでひどいこと
になります。
Vue開発者のEvan YouさんがChromeエクステンションを作っていますので、利用
しましょう。
しましょう。
0 コメント:
コメントを投稿