2017年10月9日月曜日

AngularJSからVue.jsに移行するガイド

勉強の為に転載しました。
https://qiita.com/hashrock/items/e31b36248f3011ff7853


に更新
4



 この記事は最終更新日から1年以上が経過しています。
最近話題のAngularJSですが、学習コストが辛いのが難点です。
チームでのWebアプリ開発に半年ほど利用していましたが、
「難しい」「辛い」「闇」という声が多かったので、
よりシンプルなVue.jsに移行することにしました。
logo
Vue.jsはAngularのコードを一部利用して作成されており、多くの点で共通した書き
方が出来ます。
以下にご紹介します。
(カスタムDirective作るほど使い込んでいなかったので、あくまで初歩的なサンプル
なります。ご容赦ください)

AngularJSの基本形

基本的に、バインドする変数やメソッドを$scopeに生やす形になります。
var Ctrl(function($scope) {

  //バインドする変数宣言
  $scope.message = "Hello, World";

  //メソッド宣言
  $scope.method = function(){/* 処理 */};

  //初期化処理はここにベタ書き
  init();
  hoge();
  huga();
  $scope.method();

});

Vue.jsの基本形

基本的にJSONオブジェクトとして、バインディングする変数やメソッドを渡します。
$scopeに生やしていた変数は、data内に記述します。
また、バインド先の要素をelに指定します(そのためng-controllerやng-app相当の
ディレクティブがない)。
var app = new Vue({
  el: "#main",
  data: {
    message: "Hello, World"
  },
  methods: {
    method: function(){/* 処理 */}
  },
  ready: function(){
    //初期化処理はここに書く
    init();
    hoge();
    huga();
    this.method();
  }
});

Directive

多くの組み込みDirectiveがVueにも用意されており、
基本的に「ng-*」を「v-*」に置き換えてヘルプを参照すればいいです。
ng-ifはv-ifに、ng-viewはv-viewに、ng-modelはv-modelに置き換えられます。

例:ng-clickからv-onに置き換え

注意点として、ng-clickはv-onに置き換えられます。

Angular版

<button ng-click="someMethod()">Hey</button>

Vue版

<button v-on="click: someMethod()">Hey</button>

例:ng-repeatからv-repeatに置き換え

ほとんど同じです。ネストも問題なく可能です。

Angular版

<li ng-repeat="user in users">{{user.name}}</li>

Vue版

<li v-repeat="user : users">{{user.name}}</li>

$httpや$q

Vue.jsにはありません。jQueryや同等のライブラリで置き換える事になります。
$qは同等のライブラリ、qを使いましょう。
https://github.com/kriskowal/q
$http置き換えはjQueryのpost,getでもいいですが、superagentが薄くてお勧め
です。
https://github.com/visionmedia/superagent

AngularJS Batarangの代替は?

Vue.jsは、dataに指定したオブジェクトにgetter, setterを生やす仕様のため、
インスペクタで変数の内容を見ようとすると、getterとsetterだらけでひどいこと
になります。
Vue開発者のEvan YouさんがChromeエクステンションを作っていますので、利用
しましょう。
https://github.com/vuejs/vue-devtools

ーーー
Angularより優れたJavaScriptフレームワークとしての
Meteor(ミーティア)のご紹介はこちら


0 コメント:

コメントを投稿