【Vue.js】ディレクティブをいろいろ使ってみる

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」の2つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。

次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。

参考にさせていただいたのはこちらの書籍です。


基礎から学ぶ Vue.js


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp