Vue(二、カスタム命令)

二、カスタム命令
Vue 2.0では,コード多重化と抽象化の主な形式はコンポーネントである.しかし、通常のDOM要素を最下位に操作する必要がある場合もあります.この場合、カスタムコマンドが使用されます.
フック関数
1つの命令定義オブジェクトには、次のフック関数があります(いずれもオプション).

* `bind`：     ，             。                。

* `inserted`：              (        ，           )。

* `update`：      VNode      ，          VNode     。
                       ，     。                           (           )。

* `componentUpdated`：        VNode     VNode        。

* `unbind`：     ，          。

次に、フック関数のパラメータ(すなわち、el、binding、vnode、oldVnode)を見てみましょう.
フック関数パラメータ
コマンドフック関数には、次のパラメータが入力されます.

el以外のパラメータは読み取り専用であるべきで、修正しないでください.フック間でデータを共有する必要がある場合は、要素のdatasetによって行うことを推奨します.

*   `el`：        ，         DOM 。
*   `binding`：    ，      ：
    *   `name`：   ，    `v-`   。
    *   `value`：      ，  ：`v-my-directive="1 + 1"`  ，     `2`。
    *   `oldValue`：         ，   `update`   `componentUpdated`      。          。
    *   `expression`：           。   `v-my-directive="1 + 1"`  ，     `"1 + 1"`。
    *   `arg`：       ，  。   `v-my-directive:foo`  ，    `"foo"`。
    *   `modifiers`：          。  ：`v-my-directive.foo.bar`  ，       `{ foo: true, bar: true }`。
*   `vnode`：Vue          。   [VNode API](https://cn.vuejs.org/v2/api/#VNode-%E6%8E%A5%E5%8F%A3)        。
*   `oldVnode`：       ，   `update`   `componentUpdated`      。

オブジェクトの文字数

命令が複数の値を必要とする場合、1つのJavaScriptオブジェクトの字面量を入力できます.命令関数はすべての合法的なJavaScript式を受け入れることができることを覚えておいてください.

Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })