Madea-K Dev

プログラムのメモや日々思ったことなど

< 35歳迄に起業し1000万円以上稼ぐ >

directive

独自の DOM 操作を共通化したい場合、カスタムディレクティブを定義する。

以下は、v-focusというカスタムディレクティブを定義する例。
ページを読み込む(Vue インスタンスをマウントする)とinput要素に自動でフォーカスが当たるようにする。

ローカルディレクティブに登録する

directivesオプションを利用すれば、コンポーネント毎にカスタムディレクティブを登録できる。

前述のinsertedを含め、カスタムディレクティブでは以下のフック関数を利用できる。
bind: カスタムディレクティブが初めて対象の要素に紐付いた時に1度だけ呼ばれる。
inserted: カスタムディレクティブと紐付いた要素が親 Node に挿入された時に呼ばれる。
update: 紐付いた要素を抱合しているコンポーネントの VNode が更新される度に呼ばれる(子コンポーネントが更新される前に呼ばれる)。
componentUpdated: 紐付いた要素を抱合しているコンポーネントの VNode と子コンポーネントの VNode が更新された時に呼ばれる。
unbind: 紐付いた要素からディレクティブが取り除かれた時に呼ばれる。

ディレクティブフック引数
el: ディレクティブがひも付く要素。DOM を直接操作するために使用できます。
binding: 以下のプロパティを含んでいるオブジェクト。
– name: v- 接頭辞 (prefix) 無しのディレクティブ名。
– value: ディレクティブに渡される値。例えば v-my-directive=”1 + 1″ では、value は 2 です。
– oldValue: update と componentUpdated においてのみ利用できる以前の値。値が変化したかどうかに関わらず利用できます。
– expression: 文字列としてのバインディング式。例えば v-my-directive=”1 + 1″ では、式は “1 + 1” です。
– arg: もしあれば、ディレクティブに渡される引数。例えば v-my-directive:foo では、arg は “foo” です。
– modifiers: もしあれば、修飾子 (modifier) を含んでいるオブジェクト。例えば v-my-directive.foo.bar では、modifiers オブジェクトは { foo: true, bar: true } です。
vnode: Vue のコンパイラによって生成される仮想ノード。さらに詳しくは VNode API を参照してください。
oldVnode: update と componentUpdated フックにおいてのみ利用できる以前の仮想ノード。

いくつかのプロパティを使用したカスタムディレクティブの例:

出力

name: “demo”
value: “hello!”
expression: “message”
argument: “foo”
modifiers: {“a”:true,”b”:true}
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

オブジェクトリテラル

あなたのディレクティブが複数の値を必要ならば、JavaScript オブジェクトリテラルも渡すことができます。
ディレクティブは任意の妥当な JavaScript 式を取ることができるのを覚えておいてください:

/ Vue-Nuxt

×