今回は、

「カスタムディレクティブ」

基本

Vue.jsの標準のディレクティブ(v-modelとかv-showとか)に加えて、自分でディレクティブを定義できる。

らしい。画面描画のinputフォーカスとか。

Vue.directive('focus', {
  // ひも付いている要素が DOM に挿入される時...
  inserted: function (el) {
    // 要素にフォーカスを当てる
    el.focus()
  }
})

directiveにグローバル登録できる。ローカルなら、directiveslオプション。(コンポーネントとかと一緒)

フック関数があるんすね、第一引数がDOM要素なのね。これはどのDOM要素だろうか。ディレクティブがついているコンポーネントのルートかな。HTML要素に指定されていたら、そのHTML要素だろうが。

フック関数はすべて任意。

bind:ディレクティブが要素に紐付いたとき一度だけ実行。いつだそれは。。
inserted：紐付いている要素が親ノードに挿入されたときに呼ばれる。必ずしもドキュメントにあるとは限らんらしい。どういうこと。
update：紐付いた要素を抱合しているコンポーネントのvnodeが更新されるたびに呼ばれる。コンポーネントはv-nodeの集合(ツリー)の気がするが、どこかで更新されたら、updateが呼ばれるってことかな。このあたりの構造はよくわかってない。
componentUpdated：このあたりののvnodeと子コンポーネントのvnodeが更新された後に呼ばれる
unbind：ディレクティブが要素から取り除かれたときに1度呼ばれる。

ディレクティブって、要素に紐づく、取り除かれる、ってタイミングがあるみたい。内部的な作りを前提にしている説明な気がする。vnodeの作られ方とか。

(やっちまった、戻ると消えるのね。。。これは致命的だ)

elだけではない。(el, bindings, vnode, oldVnode)らしい。oldVnodeはupdateとcomponentUpdatedのときだけ利用できる。update前のvnode.

v-demo:foo.a.b="message" // messageはdataで定義されている変数

bindingオブジェクト。valueはディレクティブに渡される値。式なら評価結果。expressionが式の文字列表現。argは上記の例ではfoo、modifiersは、上記例では{a:true,b:true}らしい。argとmodifiersって違う概念だったのか。そりゃそう。

もしかして、ディレクティブ作れるようになると、vnodeの理解が深まるのかしら。

<p v-pin:[direction]="200">xxx</p>

bindng.arg の値をbindフック関数内で判定して、挙動を変えられる。コンポーネント利用側から柔軟に制御できるということだな。

bindとupdateに同じ振る舞いを定義するときは、オブジェクトを渡すんじゃなくて関数を直接渡してしまう。

Vue.directive("hoge", function(el, binding) { //})

たしかに、bindとupdateで同じふるまいが普通なのかな。

ディレクティブが複数の値を必要なら、JSオブジェクトリテラルを渡すことができる。なんのこっちゃない、オブジェクトを渡せるということ。ディレクティブは任意のJS式を取れる（覚えましょう）

今日はここまでかな。次は「描画関数とJSX」