Edited at

Vue.js の 2.0 の新機能をみていこう(1

More than 1 year has passed since last update.

久しぶりに勉強します。

ソース:https://github.com/vuejs/vue/issues/2873


Vue.js 2.0の変更点


  • テンプレートのパーサーがDOMに依存しなくなったので1系であった制限がなくなりました。

  • テンプレートを関数にするコンパイラとランタイムを分離しました。現在2つのビルドが存在します。


    • スタンドアローン


      • 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


      • 独自に設定できるクラス





  • イベント


    • 1系の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の変更から。