Vue.jsのディレクティブ（Directive）を学習を兼ねて jsfiddle でいろいろと使ってみました！よろしければ、動作させてみてください！
v-model
インプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。
次はtextareaで複数行入力する場合です。
checkboxの場合です。
SVGのデータバインディング
circleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。
v-on
v-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。
v-on:clickは@clickに省略できます。
v-for, v-if
v-on:changeで _set_animal メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。v-forでは配列のインデックスを取得して、v-if=”selected_types.length > 0″のところで条件分岐しています。
v-transition
v-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の２つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。
次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。
参考にさせていただいたのはこちらの書籍です。
