Vue.jsカスタム命令day 3(2019.5.20)

vue.jsカスタム命令
概要:
コア機能のデフォルト内蔵命令(v-modelとv-show)に加えて、Vueはカスタム命令の登録を許可します.注意、Vue 2.0では,コード多重化と抽象化の主な形式はコンポーネントである.しかし、通常のDOM要素を最下位に操作する必要がある場合もあります.この場合、カスタムコマンドが使用されます.
1、
ページがロードされると、要素はフォーカスされます(autofocusはモバイル版Safariで動作しません).実際には、このページを開いても何もクリックしていない限り、この入力ボックスはフォーカス状態にあるはずです.次に、コマンドを使用してこの機能を実現します.

//             `v-focus`
Vue.directive('focus', {
  //            DOM   ……
  inserted: function (el) {
    //     
    el.focus()
  }
})

ページがロードされると、要素はフォーカスされます(autofocusはモバイル版Safariで動作しません).実際には、このページを開いても何もクリックしていない限り、この入力ボックスはフォーカス状態にあるはずです.次に、コマンドを使用してこの機能を実現します.

//             `v-focus`
Vue.directive('focus', {
  //            DOM   ……
  inserted: function (el) {
    //     
    el.focus()
  }
})

ローカルコマンドを登録する場合は、コンポーネントにもdirectivesのオプションがあります.

directives: {
  focus: {
    //      
    inserted: function (el) {
      el.focus()
    }
  }
}

次に、テンプレート内の任意の要素で新しいv-focusプロパティを使用できます.次のようにします.

2、フック関数
1つの命令定義オブジェクトには、次のフック関数があります(いずれもオプション).

bind:1回のみ呼び出され、命令が要素に最初にバインドされたときに呼び出されます.ここでは、一度に初期化設定を行うことができます.

inserted:バインドされた要素が親ノードに挿入されたときに呼び出されます(親ノードが存在することを保証しますが、必ずしもドキュメントに挿入されているわけではありません).

update:コンポーネントのVNode更新時に呼び出されますが、サブVNode更新の前に発生する可能性があります.命令の値が変わったかもしれないし、なかったかもしれない.ただし、更新前後の値を比較することで、不要なテンプレート更新を無視できます(詳細なフック関数パラメータは下を参照).

componentUpdated:命令が存在するコンポーネントのVNodeおよびそのサブVNodeがすべて更新された後に呼び出される.

unbind:1回のみ呼び出され、命令が要素にバインドされていないときに呼び出されます.

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

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を参照してください.

oldVnode:前の仮想ノードは、updateおよびcomponentUpdatedフックでのみ使用できます.

el以外のパラメータは読み取り専用であるべきで、修正しないでください.フック間でデータを共有する必要がある場合は、要素のdatasetによって行うことを推奨します.
これらのアトリビュートを使用したカスタムフックのサンプルです.

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '
' +
      'value: '      + s(binding.value) + '
' +
      'expression: ' + s(binding.expression) + '
' +
      'argument: '   + s(binding.arg) + '
' +
      'modifiers: '  + s(binding.modifiers) + '
' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

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
命令のパラメータは動的であってもよい.例えば、v-mydirective:argument=[dataproperty]において、argumentは、この命令フックbindingパラメータのarg propertyに値を付与する文字列であり、datapropertyは、コンポーネントインスタンスに参照され、同じbindingパラメータのvalue propertyに値を付与するdata propertyである.命令フックが呼び出されると、bindingパラメータのvalue propertyはdatapropertyの値に基づいて動的に変化する.
動的パラメータを使用したカスタムコマンドの例は、次のとおりです.

  
Scroll down the page
  
I’ll now be offset from the left instead of the top

Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg == 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
})

// start app
new Vue({
  el: '#app',
  data() {
    return {
      dynamicleft: 500
    }
  }
})

関数の概要
多くの場合、他のフックに関心を持たずにbindとupdateで同じ動作をトリガーしたい場合があります.たとえば、次のように書きます.

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

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

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