Vue.js の 2.0 の新機能をみていこう（１

久しぶりに勉強します。
ソース：https://github.com/vuejs/vue/issues/2873

Vue.js 2.0の変更点

• テンプレートのパーサーがDOMに依存しなくなったので1系であった制限がなくなりました。
• テンプレートを関数にするコンパイラとランタイムを分離しました。現在２つのビルドが存在します。
  • スタンドアローン
    • １系と同様、コンパイラとランタイムの両方を含みます。
  • ランタイムのみ
    • コンパイラを含まないためテンプレートを事前コンパイルするか、レンダー関数を自作してください。npmパッケージから入手する場合、デフォルトではこちらになります。これはBrowserifyなどが事前コンパイルステップを含み、そのなかでvueifyなどが使用され、コンパイルされることを想定しているからです。
• ConfigやAPIに新規・非推奨があります

v-for イテレーションの変更

• \$indexと\$keyの非推奨
• ネストループに限界があるため非推奨です
• 新構文：Array
  • value in array
  • (value, index) in array
• 新構文：Object
  • value in obj
  • (value, key) in obj
  • (value, key, index) in obj

ディレクティブの変更

• 役割を大幅に減らしました。
• 現状、ディレクティブはDOMの直接操作のためだけにあります。
• これからはコンポーネントを使ってください。
• ディレクティブはインスタンスを持たなくなりました。つまりthisは存在せず、bindなどはデータを引数から渡されます。
• bindingは不変であり、値をセットしたりプロパティを追加したりできません。どうしても必要な場合はelを使ってください。（上記リンク先にコード例あり）
• updateフックの変更
  • bindの後に自動的には呼ばれません
  • 値に変更があったかどうかに関わらず、再描画時に常に呼ばれます。
• パラメータやオプションの類は全て非推奨になりました。

フィルターの変更

• フィルターは{{ }}内でのみ使えるようになりました。
• ビルドインのフィルターはありません。moment.jsやaccounting.jsなどを使うか自作してください。
• スペースデリミタはやめJavascriptの関数のようになりました。
  • {{ date | formatDate('YY-MM-DD') }}

アニメーション (Transition)

Transition CSSクラスの変更

• v-transitionクラスは設定されなくなりました
• AngularやReactにクラス名を合わせました

API の変更

<transition>

• 単一タグに対するアニメーションは、そのタグを<transition>タグで囲むことで実現できるようになりました。
• このタグはレンダリングされず、アニメーションとしてのみ現れます。
• プロパティ
  • name: String (Default: v)
    • CSSクラスをつくります。
    • name = 'fade' -> .fade-enter, fade-enter-active, etc.
  • appear: Boolean (Default: false)
    • 最初の描画時に適応するかどうか
  • css: Boolean (Defaut: true)
    • CSSクラスを適応するかどうか
    • falseの場合、イベントのみ発生
  • type: String (Default: 自動）
    • transitionイベントの種類を指定
    • 値："transition"/"animation"
    • デフォルトではより長い時間がかかるほうを選ぶ
  • mode: String (Default:同時）
    • leaveとenterクラスを切り替えるタイミング
    • 値: "out-in"/"in-out"
  • enterClass/leaveClass/etc.: String
    • 独自に設定できるクラス
• イベント
  • １系のenterなどのフックイベントを属性としてかけます
  • <transition @enter="func">
  • leave-cancelledは使えません。ただし、v-showでは使えます。

<transition-group>

• 複数の子要素に対してアニメーションできます
• <transition>と異なり実際にタグがレンダリングされます
• tag属性でタグを指定できます。デフォルトはspanです。
• is="transition-group" 属性が設定されます。
• modeプロパティ以外の<transition>のプロパティが使えます。
• 全ての子要素にはユニークなキーが必要です。
• CSS transform による Moving Transitionsが可能です
• demo

再利用性

• Vue.transition()とtransitionオプションは非推奨になりました。
• コンポーネントのプロパティとイベントで設定してください。
• 再利用できるtransitionを作成する場合、transitionコンポーネントを作成してください。
• これはFunctional componentの一種になります。

いろいろ非推奨になってたりして結構変わってますね・・・

結構長いですね。いったん休憩。次回はv-modelの変更から。